使用REDUX用反应 - 行动(v.3或v.4)制造受保护的路线

Question

我们如何使用Redux在React-Navigation中创建受保护的路由？

认为我有一个redux商店，其中包含以下状态

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/selfieap/blob/blob/master/client/client/src/routes.js

有人可以帮助我弄清楚如何在反应，redux和React-navigation中创建受保护的路线

Answer 1

React-Navigation完全适用于此类身份验证流的情况。

您必须将受保护的路线分组为一个中堆。使用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，该CC_8是否为用户进行身份验证是否符合逻辑：

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 Store，访问任何数据并将其用于路由逻辑：）

Answer 2

，因此您有一个redux状态变量createSwitchNavigator0。

在每个屏幕中，您都需要检查此状态，如果未登录，则用户登录屏幕并重置导航堆栈。

您可以在第一次运行时检查任何生命周期方法，

例如，constructor，componentWillMount，componentDidMount等...

用于REDUX状态检查，

if(!this.props.isAuthenticated){
 this.props.logoutAction();
 this.props.navigation.navigate("Login");//Login or whatever your first screen is...
}

和清除整个堆栈，您需要创建我们在上面的部分中调用的操作。

export const logoutAction = () => {
  return dispatch => dispatch({ type: LOGOUT_SUCCESS });
};

您必须更改文件中的一些逻辑，其中包含还原器的代码，

const appReducer = combineReducers({
  loginReducers: LoginReducers,
  ...
  ...
});
export default (rootReducer = (state, action) => {
  if (action.type == LOGOUT_SUCCESS) {
    state = undefined;
  }
  return appReducer(state, action);
});

这将重置整个还原器。

现在，如果要进行登录按钮，则按钮的onPress只需将isAuthenticated更改为false，而Fire导航方法和注销操作则全部。

Answer 3

您可以使用React-Native路由器通量进行导航

https://www.npmjs.com/package/reaect-native-router-flux

样本：

<Text
    style={alerts.btn}
    onPress={
        () => Actions.question(
            // send data 
            {
                'code': data_1,
            })}>
    Go to Home
</Text>