在React Navigation中切换组件

Question

我正在尝试使用本教程中的React Navigation：

https://reactnavigation.org/docs/en/auth-flow.html

代码工作正常但是当我将它拆分为多个组件时，我可以从Root调用Login组件，但是我无法从Login组件导航到其他屏幕，因为我的堆栈是在Root登录中定义的，而Login组件不知道堆栈。这是我的代码：

App.js：

    import Login from './components/Login';

    class SignInScreen extends React.Component {
        static navigationOptions = {
          title: 'Please sign in',
        };

        render() {
          return (
                <Login />
          );
        };
    }
....

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

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

Login.js：

class Login extends Component {

    render(){
        return(
                 <View>
                    ........
                 <View>
        );
    }
    _signInAsync = async () => {
        await AsyncStorage.setItem('userToken', 'abc');
        this.props.navigation.navigate('App');
      };

};

export default Login;

Answer 1

您可以使用withNavigation HOC从Login组件访问堆栈。

在这里阅读更多相关信息：https://reactnavigation.org/docs/en/with-navigation.html