反応ネイティブ5.0ナビゲーションバーの設定

依存関係を導入し、参照モジュールの公式サイトをインストール  https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

Aとページジャンプ  https://reactnavigation.org/docs/navigation-actions

インポートから{CommonActions} 「@反応ナビゲーション/ネイティブ」。

navigation.dispatch（
  CommonActions.navigate（{
    名前：' プロフィール' 、
     paramsは：{
      ユーザー：「ジェーン」、
    }、
  }）
）;

  

ページの階層：

index.jsから本体へ

本体は次のように返されます

レンダリング（）{
　　リターン（

　　　　

<NavigationContainer>
        <Stack.Navigator>
          < Stack.Screen
            NAME =」 " 
            コンポーネント= {} HomeContainerPage
            オプション= {{ headerTransparent：真、 }} /> <Stack.Screen名= "CheckInPage"コンポーネントCheckInPage} = {/> 
　　　　　　　　...省略多くのページ Stack.Screen

</Stack.Navigator> </ NavigationContainer>

　　）

}

HomeContainerPageは、アセンブリ下のタブを切り替えるように構成されています

リターン（
     < Tab.Navigator
      initialRouteName = " ホームページ" 
      activeColor = ' 赤' 
      inactiveColor = ' ブラック' 
      labelStyle = {{たfontSize：12 }}
      barStyle = {{backgroundColorの：' 白' }}

    >
      < Tab.Screen
        名前 = 「ホームページ」
        コンポーネント = {}ホームページ
        オプション = {{
          tabBarLabel：' ホーム' 、
          tabBarIcon：（（）{tintColorは、集束} => {
             リターン（
                   <表示>
                    < 画像
                      ソース = {集束必要（？' ../img/bottomtabbar/ico.home.active.png '）：必要とする（' ../img/bottomtabbar/ico.home.png ' ）}
                      スタイル = {{幅：24、高さ：23 }}
                     />
                  </表示>
              ）
          }）、
        }}
      />
      < Tab.Screen
        名前 = " ActivityPage " 
        コンポーネント = {} ActivityPage
        オプション = {{
          tabBarLabel：' 活動' 、
          tabBarIcon：（（）{tintColorは、集束} => {
             リターン（
                   <表示>
                    < 画像
                      ソース = {集束必要（？' ../img/bottomtabbar/ico.activity.active.png '）：必要とする（' ../img/bottomtabbar/ico.activity.png ' ）}
                      スタイル = {{幅：24、高さ：23 }}
                     />
                  </表示>
              ）
          }）、
        }}
      />
      < Tab.Screen
        名前 = " RemindPage " 
        コンポーネント = {} RemindPage
        オプション = {{
          tabBarLabel：' ビジネスリマインダー' 、
          tabBarIcon：（（）{tintColorは、集束} => {
             リターン（
                   <表示>
                    < 画像
                      ソース = {集束必要（？' ../img/bottomtabbar/ico.reminder.active.png '）：必要とする（' ../img/bottomtabbar/ico.reminder.png ' ）}
                      スタイル = {{幅：24、高さ：23 }}
                     />
                  </表示>
              ）
          }）、
        }}
      />
      < Tab.Screen
        名 = 「マイページ」
        成分 = {}マイページ
        オプション = {{
          tabBarLabel：' I ' 、
          tabBarIcon：（（）{tintColorは、集束} => {
             リターン（
                   <表示>
                    < 画像
                      ソース = {集束必要（？' ../img/bottomtabbar/ico.personal.active.png '）：必要とする（' ../img/bottomtabbar/ico.personal.png ' ）}
                      スタイル = {{幅：24、高さ：23 }}
                     />
                  </表示>
              ）
          }）、
        }}
      />

    </Tab.Navigator> 
  ）。

 

アセンブリトップ]タブで定義されたホームページのスイッチ

リターン（
       < Tab.Navigator
        タブオプション = {{
          labelStyle：{たfontSize：18 }、
          TabStyle：styles.tabStyle、
          upperCaseLabel：偽、// ラベルに大文字にするかどうか 
          scrollEnabledを：trueに、
          スタイル：{
            backgroundColorの：' 白'、// クリアな 
            のZIndex：999 、
            位置：「絶対的」、
            幅：375 、
            marginTop：30 
          }、// セット全体のTabBarスタイル
          indicatorStyle：styles.noiconindicatorStyle、
          showIcon：真、
          pressOpacity：1 、


        }}

      >
        <Tab.Screen名= " 精选"コンポーネント= {FlatListDemo} />

      </Tab.Navigator> 
  ）。

 ここで、残りの設定ページ

<Stack.Screen名= " CheckInPage "コンポーネントCheckInPage} = {/> 
　　　　　　　　...省略多くのページStack.Screen