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

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 进行路由。您可以将第二个参数传递给 createStackNavigator，这是 Stack.

的配置

如果将对象传递到堆栈，则可以定义所需的屏幕。所以你的代码看起来像：

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 中路由我的登录屏幕？

How to route my login screen in react native?

react-native

stack-navigator