Question

我想在初始屏幕之后添加一个登录屏幕，然后转到主屏幕。

 const LoginStack = createStackNavigator({
Login: LoginScreen,
Home: HomeStack,
});

问题是，即使我在登录屏幕中调用主屏幕，也不会使用我的LoginStack：

 <Button onPress = {this.onPressHome}/>

 onPressHome  = () => {
this.props.navigation.navigate('Home');
};

我的App.js

 render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
        return (
            <AppLoading
                startAsync={this._loadResourcesAsync}
                onError={this._handleLoadingError}
                onFinish={this._handleFinishLoading}
            />
        );

Answer 1

我假设您使用React Navigation进行路由。您可以将第二个参数传递给Stack的配置createStackNavigator。

如果将对象传递到堆栈，则可以定义所需的屏幕。因此您的代码如下所示：

const LoginStack = createStackNavigator({ 
  Login: LoginScreen, 
  Home: HomeStack, 
}, 
{ 
  initialRouteName: 'Login',
});

然后如果您现在使用按钮，则应该可以正常工作。

因此，在您的情况下，您需要将App.js更改为以下形式：

export default App extends Component {
  componentDidMount = () => {
      this.setState({
        isLoadingComplete: true
      })
  }

render() {
    // This is the loading screen?
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
        return (
            <AppLoading
                startAsync={this._loadResourcesAsync}
                onError={this._handleLoadingError}
                onFinish={this._handleFinishLoading}
            />
        ) else {
           return <LoginStack />
        }

一旦您的LoadingIsComplete变为真实，它将呈现LoginStack

如何在React Native中路由登录屏幕？

1 个答案: