javascript - 使用 Redux 通过 React-Navigation(v.3 或 v.4)制作 protected 路线

Question

我们如何使用 redux 在 react-navigation 中创建 protected 路由？

假设我有一个包含以下状态的 redux store

const mapStateToProps = state => {
  return {
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
  }
};

我正在使用 React-navigation 来导航用户。

const loginNavigation = createStackNavigator(
  {
    login: {
      screen: Login
    },
    signup: {
      screen: Signup
    }
  },
  {
    headerMode: "none"
  }
)

const allRoutes = createSwitchNavigator(
  {
    home: {
      screen: loginNavigation
    },
    user: {
      screen: user

  },
  {
    initialRouteName: "home"
  }
);

const App = createAppContainer(allRoutes);

现在，如果用户未登录，我想重定向到登录屏幕。

在简单的 react-redux 中，这是我通常做的:https://github.com/irohitb/SelfieApp/blob/master/client/src/routes.js

谁能帮我弄清楚我们如何在 react-native、redux 和 react-navigation 中创建 protected 路由

Answer 1

react-navigation 有 createSwitchNavigator 正是为了这样的情况 Authentication Flow .

您必须将 protected 路由分组到一个 MainStack 中。使用 createStackNavigator:

const MainStack = createStackNavigator(
  {
    home: { screen: HomeScreen },
    events: { screen: EventsScreen },
    profile: { screen: ProfileScreen },
    ...
  {
    initialRouteName: "home"
  }
);

然后，再次使用 createStackNavigator 配置您的身份验证堆栈:

const AuthStack = createStackNavigator({
    login: { screen: LoginScreen },
    register: { screen: RegisterScreen },
    forgot: { screen: ForgottenPasswordScreen },
    ...
});

现在是 createSwitchNavigator - 加载 MainStack 堆栈或 AuthStack:

const Routes = createSwitchNavigator({
    initialLoading: InitialLoadingScreen,
    auth: AuthStack,
    all: MainStack,
}, {
    initialRouteName: 'initialLoading',
});

export default createAppContainer(Routes);

createSwitchNavigator 将加载 InitialLoadingScreen，它包含用户是否通过身份验证的逻辑:

class InitialLoadingScreen extends React.Component {
    constructor(props) {
        super(props);
        this.bootstrapAsync();
    }

    bootstrapAsync = async () => {
        // Load the home screen for the logged in users 
        if (this.props.isAuthenticated) {
            return this.props.navigation.navigate('home');
        }

        // load the Auth screen if the user is NOT logged in
        this.props.navigation.navigate('login');
    }

    // Render any loading content that you like here
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
            </View>
        );
    }
}

const mapStateToProps = ({ settings }) => ({
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
});

export default connect(mapStateToProps)(InitialLoadingScreen);

如您所见，您可以将 InitialLoadingScreen 连接到 redux 存储，以访问任何数据并将其用于您的路由逻辑:)