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