首页 > 其他 > 详细

react-native 5.0导航栏配置

时间:2020-03-09 13:05:01      阅读:139      评论:0      收藏: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,
    },
  })
);

技术分享图片  技术分享图片

页面的层级关系:

从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

 

 
 

react-native 5.0导航栏配置

原文:https://www.cnblogs.com/liuw-flexi/p/12447719.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!