リアクションナビゲーションメソッドの使い方

反応ナビゲーションは、登録されているすべてのルーティング ページのプロパティにナビゲーションを挿入します。使用方法: 1. "const Main = createStackNavigator({...})" を通じてメイン ルートを作成します。 2. " createBottomTabNavigator" "下部のタブ バーを作成します。 3. 「createSwitchNavigator」などで特別なスイッチ ルートを作成します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応ナビゲーション メソッドの使用方法?

react-navigation 共通メソッド

react-navigation は rn プロジェクトで使用されるルーティング マネージャーであり、ルーティング履歴管理の提供に加えて、ナビゲーター UI コンポーネントもあります。 ;

react-navigation は、登録されているすべてのルーティング ページのプロパティにナビゲーションを挿入します!!!

1. メイン ルートを作成します;

createStackNavigator

基本的にプロジェクトで使用されるすべてのページ ルーティングが含まれます;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})

2. 下部のタブ バーを作成します;

createBottomTabNavigator

つまり、プロジェクトの下部にあるいくつかのタブ ページングです。アプリのホームページ

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最热',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

3. 特別な切り替えルートを作成します。ジャンプ前のページは履歴スタックに入りません。

#

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})

4. ナビゲーション バーを占めるトップ タブ ページのラベルを作成します。 Position

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

5.navigationOptions一般的に使用される構成プロパティ

headerTtile: ページのタイトル

headerTitleStyle: タイトル テキストのスタイル

headerStyle: タイトル ブロック全体のスタイル

6 .tab パーツの参照属性

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

BottomTabBar コンポーネントもこの属性を使用できます

7. Make return function

通常はこれを使用します返される必要があるページ上の .props .navigation はナビゲーション props オブジェクトを取得します;

ページに戻るには

this.props.navigation.goBack()

を使用できますが、その前提条件は this.props です。 .navgation は現在のページのナビゲーションである必要があります。つまり、この .props.navigation.state.routeName を表示して次のことを判断できます:

Android のリターン キーのリターン判定などの特殊な場合の場合、ロールバック イベント BackHandler が上向きに渡されるため、戻りイベントがページ上でキャプチャされない可能性があります。その場合、 this.props.navigation はロールバックする必要があるナビゲーション オブジェクトではない可能性があるため、 go.Back() を使用することはできません。成功するか、場合によっては、ナビゲーション オブジェクトに goBack() メソッドがない可能性があります。この問題が発生します。

例:

ホームページは第 1 レベルのルートであり、詳細ページは第 2 レベルのルートであり、両方のページに BackHandler コールバック関数があります。詳細に BackHandler がない場合、現在のページによってキャプチャされた場合は、ホームの BackHandler コールバック関数に渡されます。その後、this.props.navigation が返されます。 home は詳細ではなくホームページを参照するため、goBack の呼び出しは成功しません。 ！ ！

解決策:

NavigationActions を使用する;

すべての NavigationActions は、navigation.dispatch() メソッドを使用してルーターに送信できるオブジェクトを返します。

次の操作をサポートします。

Navigate - 別のルートに移動します。

Back - 前の状態に戻ります。

Set Params - パラメータを設定します。指定されたルートパラメータ

Init - 状態が未定義の場合に最初の状態を初期化するために使用されます

詳細についてはドキュメントを参照してください: https://reactnavigation.org/docs/zh-Hans/navigation- events.html

パス:

dispatch(NavigationActions.back());

リターン操作を実行できます;

注:

dispatch() メソッドは this.props.navigation にあります

推奨学習: 「react ビデオ チュートリアル 」

以上がリアクションナビゲーションメソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。