我可以在 Stack Navigator 中使用条件吗？答案

【问题标题】：Can I use conditionals in Stack Navigator?我可以在 Stack Navigator 中使用条件吗？
【发布时间】：2018-04-18 13:33:10
【问题描述】：

我是这方面的新手，所以我想了解是否可以在导航参数中使用条件 if 和 else。

所以在 Stack Navigator 之前，我在 app.js 中使用了以下代码

render() {
    var renderMainView = () => {
      if (this.props.user_id) {
        return (
          <Main />
        );
      } else {
        return (
          <Login />
        );
      }
    }
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        {renderMainView()}
        <AlertContainer/>
      </View>
    )
}

现在是这个样子

render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        <AppNavigator />
        <AlertContainer/>
      </View>
    )
  }

在 Login.js 中，它曾经看起来像这样

<TouchableOpacity onPress={handleSubmit(_signIn)} style={{margin: 10, alignItems: 'center'}}>
  <Text style={{
   backgroundColor: 'steelblue', color: 'white', fontSize: 16,
   height: 37, width: 200, textAlign: 'center', padding: 10
}}>Login</Text>

我现在的问题是我应该如何进入onPress={() => this.props.navigation.navigate('Main')}，在进入主屏幕之前，先调用这个handleSubmit(_signIn)，然后检查this.props.use_id

【问题讨论】：

React-Navigation with Login Screen的可能重复

标签： react-native react-props stack-navigator

【解决方案1】：

您可以使用SwitchNavigator 来实现所需的行为

这是示例代码：

const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });

export default SwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

SwitchNavigator 参考

SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)

expo example

【讨论】：