安装的依赖和导入模块参考官网 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