react-native 5.0導航欄配置

安裝的依賴和導入模塊參考官網 https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

頁面跳轉用的是 https://reactnavigation.org/docs/navigation-actions

頁面跳轉

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',
    params: {
      user: 'jane',
    },
  })
);

  

頁面的層級關系：

<NavigationContainer>

　　<Stack.Navigator>

　　　　<Stack.Screen
　　　　　　name=" "
　　　　　　component={HomeContainerPage}
　　　　　　options={{
　　　　　　headerTransparent: true,
　　　　}}/>
　　　　<Stack.Screen name="CheckInPage" component={CheckInPage} />
　　　　...更多頁面
　　</Stack.Navigator>

</NavigationContainer>

 

 

從index.js進入 主組件

主組件中返回的是如下這個

render (){
　　return (

　　　　

<NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name=" " component={HomeContainerPage} options={{ headerTransparent: true, }}/> <Stack.Screen name="CheckInPage" component={CheckInPage} />
　　　　　　　　...省略很多頁面Stack.Screen

</Stack.Navigator> </NavigationContainer>

　　)

}

HomeContainerPage組件中配置的是底部切換tab

return (
    <Tab.Navigator
      initialRouteName="HomePage"
      activeColor='red'
      inactiveColor='black'
      labelStyle={{ fontSize: 12 }}
      barStyle={{ backgroundColor: 'white' }}

    >
      <Tab.Screen
        name="HomePage"
        component={HomePage}
        options={{
          tabBarLabel: '首頁',
          tabBarIcon: (({tintColor,focused})=>{
            return (
                  <View>
                    <Image
                      source={focused?require('../img/bottomtabbar/ico.home.active.png'):require('../img/bottomtabbar/ico.home.png')}
                      style={{width:24,height: 23}}
                    />
                  </View>
              )
          }),
        }}
      />
      <Tab.Screen
        name="ActivityPage"
        component={ActivityPage}
        options={{
          tabBarLabel: '活動',
          tabBarIcon: (({tintColor,focused})=>{
            return (
                  <View>
                    <Image
                      source={focused?require('../img/bottomtabbar/ico.activity.active.png'):require('../img/bottomtabbar/ico.activity.png')}
                      style={{width:24,height: 23}}
                    />
                  </View>
              )
          }),
        }}
      />
      <Tab.Screen
        name="RemindPage"
        component={RemindPage}
        options={{
          tabBarLabel: '經營提醒',
          tabBarIcon: (({tintColor,focused})=>{
            return (
                  <View>
                    <Image
                      source={focused?require('../img/bottomtabbar/ico.reminder.active.png'):require('../img/bottomtabbar/ico.reminder.png')}
                      style={{width:24,height: 23}}
                    />
                  </View>
              )
          }),
        }}
      />
      <Tab.Screen
        name="MyPage"
        component={MyPage}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: (({tintColor,focused})=>{
            return (
                  <View>
                    <Image
                      source={focused?require('../img/bottomtabbar/ico.personal.active.png'):require('../img/bottomtabbar/ico.personal.png')}
                      style={{width:24,height: 23}}
                    />
                  </View>
              )
          }),
        }}
      />

    </Tab.Navigator>
  );

 

HomePage 組件中定義了頂部切換tab

return (
      <Tab.Navigator
        tabBarOptions={{
          labelStyle: { fontSize: 18 },
          tabStyle:styles.tabStyle,
          upperCaseLabel:false,//是否使標簽大寫
          scrollEnabled:true,
          style:{
            backgroundColor:'white',//clear
            zIndex:999,
            position:'absolute',
            width:375,
            marginTop:30
          },//設置整個TabBar的樣式
          indicatorStyle:styles.noiconindicatorStyle,
          showIcon:true,
          pressOpacity:1,


        }}

      >
        <Tab.Screen name="精選" component={FlatListDemo} />

      </Tab.Navigator>
  );

 其余頁面配置在這里

<Stack.Screen name="CheckInPage" component={CheckInPage} />
　　　　　　　　...省略很多頁面Stack.Screen