在 React Navigation 中的组件之间切换

Question

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

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

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

应用程序.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',
        }
      ));

登录.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 从登录组件访问堆栈。

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