反应按选定页面导出本机导航

Question

First I have defined a createStackNavigator on the APP.js page.

const MainNavigator=createStackNavigator({
 Home: {
  screen: HomePage,
  navigationOptions:{
  header:null }},
SignUpPages:{
  screen:SignUpPages,
  navigationOptions:{
  header:null } },
ProfilePages: {screen: ProfilePages,navigationOptions:{title:'Test Project',headerLeft:null,headerStyle: { backgroundColor: '#004f9e'},headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1}}}});

I then define createBottomTabNavigator for other pages.

const BottomNavigator=createBottomTabNavigator({
      ProfilePages: {
      screen: ProfilePages,
      navigationOptions:{
      title:'Profile Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  },

  PlatePages: {
      screen: PlatePages,
      navigationOptions:{
      title:'Hafriyat Plate Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  },

  QueryPages: {
      screen: QueryPages,
      navigationOptions:{
      title:'Query Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  }
})

When the first project is opened, the login page should be opened and the sign-up page can be accessed. If logged in, go to the profile page and createBottomTabNavigator should be opened on this page.

I can only export one navigator from one page. From this page, I thought to export the data with this.props.state and then export the data according to the data. How can I do that?

const App=createAppContainer(MainNavigator);
const App2=createAppContainer(BottomNavigator)

if(this.props.valMenu=='Main'){
export default App

}
else if(this.props.valMenu=='Bottom'){
export default App2
}

Answer 1

I would propose something different, not sure if it's the correct way to do it but it works for me.

I'd recommend you add a function to get if the user is logged on or not and then based on that you can route the user to the different screens that you have. From the code snippet that you gave, it would go something like this:

const NotLoggedNavigator=createStackNavigator({
  SignUpPages:{
    screen:SignUpPages,
    navigationOptions:{
      header:null 
    } 
  }
});

const BottomNavigator=createBottomTabNavigator({
  ...
});

const MainNavigator=createStackNavigator({
  Home: { screen: HomePage },
  NotLoggedStack: { screen: NotLoggedNavigator },
  LoggedStack: { screen: BottomNavigator },
}, {
  initialRouteName: 'Home',
  headerMode: 'null',
});

const AppContainer = createAppContainer(MainNavigator);

Doing this you would export only one appContainer. Then when your app starts you'd check if the user if logged on or not and route accordingly, something like this:

if (user.isSignedUp) {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'NotLoggedStack' })] }
  ))
} else {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'LoggedStack' })] }
  ))
}

I did not test the code, but I think it's a clean way to route to different stacks if user is logged on or not, hope it helps.