Question

我是新手，所以我想了解我是否可以在导航参数中使用条件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

Answer 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

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

1 个答案: