Question

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

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

该代码可以正常工作，但是当我将其拆分为多个组件时，可以从“根”调用“登录”组件，但是由于“堆栈”是在“根”登录中定义的，而“登录”组件却没有知道堆栈。这是我的代码：

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

在此处详细了解：https://reactnavigation.org/docs/en/with-navigation.html

在React Navigation中的组件之间切换

1 个答案: