这是App.js
中带有响应导航3.9的屏幕路由结构。有一个InitialNavigator
屏幕,其中包含启动屏幕和App
屏幕。在“应用程序”屏幕中,有一个bottomTabNavigator,Event
和User
堆栈。
const ChatWithSocket =(props)=>()
//create the navigator
const EventStack = createStackNavigator(
{
Event: Event,
NewEvent: NewEvent,
Chat: {
screen: ChatWithSocket,
},
Signup: Signup,
Verif1: Verif1,
}, {
initialRouteName: 'Verif1',
}
);
const UserStack = createStackNavigator(
{
NewUser: NewUser,
EditUser: EditUser,
}, {
initialRouteName: "NewUser",
}
);
const bottomTabNav = createBottomTabNavigator(
{
Event: {screen: EventStack},
User: {screen: UserStack},
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
const data = navigation.dangerouslyGetParent().getParam('params');
let iconName;
if (routeName === 'Event') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'User') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
return <Text>Hello the world!</Text>
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
const InitialNavigator = createSwitchNavigator({
Splash: SplashScreen,
App: bottomTabNav,
});
需要使用从初始屏幕传递的navigation
中的数据来自定义路线屏幕:
const params = navigation.dangerouslyGetParent().getParam('params')
如何传递navigation
作为createStackNavigator
和createBottomTabNavigator
的变量以自定义路由?像这样:
createStackNavigator(({navigation}) => {
//customize route screen based on value in navigation
})
带有示例的示例将不胜感激。