Question

首先，我在APP.js页面上定义了一个createStackNavigator。

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}}}});

然后我为其他页面定义createBottomTabNavigator。

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, },
      }
  }
})

打开第一个项目时，应打开登录页面并可以访问注册页面。如果已登录，请转到配置文件页面，并应在此页面上打开createBottomTabNavigator。

我只能从一页导出一个导航器。从这个页面，我想使用this.props.state导出数据，然后根据该数据导出数据。我该怎么办？

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

我会提出不同的建议，不确定这样做是否正确，但是对我有用。

我建议您添加一个功能，以获取用户是否登录，然后基于该功能可以将用户路由到您拥有的不同屏幕。从您提供的代码段中，将显示以下内容：

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);

执行此操作将仅导出一个appContainer。然后，当您的应用启动时，您将检查用户是否已登录并进行相应的路由，如下所示：

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' })] }
  ))
}

我没有测试代码，但是我认为这是一种干净的方法，无论用户是否登录，它都可以路由到不同的堆栈，希望对您有所帮助。

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

1 个答案: