如何根据 redux 状态选择反应原生应用程序的启动屏幕

Question

在我的 react-native 应用程序中有几个屏幕，用户应该按顺序浏览：首先他们应该登录，然后为应用程序设置 PIN 码，然后选择一个城市，然后他们才能使用主要功能。在下一次启动时，用户应直接进入主屏幕。

我正在使用 redux 管理状态并将数据保存在设备上的异步存储中。当应用程序启动时，数据从存储加载并基于它，用户应被发送到某个屏幕或其他屏幕。

问题是：在应用生命周期中的时间和地点，我该如何做到这一点？

让我们看这个例子：https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample。
它生成初始导航状态，但以静态方式生成：

// Start with two routes: The Main screen, with the Login screen on top.
const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const initialNavState = AppNavigator.router.getStateForAction(
  secondAction,
  tempNavState
);

如果我想从设备存储加载isLoggedIn标志并相应地导航用户，我应该在该示例中更改什么？

Answer 1

前段时间我遇到了同样的问题，我会告诉你我是如何解决的：在我的第一个屏幕中.js应用程序，我输入了redux配置：

const App = () => (
  <Provider store={store}>
    <View style={{ flex: 1 }}>
        <Main />
    </View>
  </Provider>
)

在主要.js：

class Main extends Component {
    constructor() {
        super();
        this.state = ({
            initial_data_fetched: false
        })
    }
    componentDidMount() {
        this.props.isUserAthenticated();
    }
    componentWillReceiveProps(next) {
        if (next.token !== '') {
            if (!this.state.initial_data_fetched) {
                this.props.loadUserData(next.token);
            }
            this.setState({ initial_data_fetched: true })
        }
    }
    render() {
        if (this.props.processing_auth) {
            return (<Spinner size="small" />)
        } else {
            return (<Router authenticated={this.props.authenticated}/>)
        }
    }
}
const mapStateToProps = ({ auth }) => {
    const { processing_auth, authenticated, token } = auth;
    return { processing_auth, authenticated, token };
};
export default connect(mapStateToProps, { isUserAthenticated})(Main);

最后，通过react-native-router-flux我选择是显示登录组件还是初始组件。那是我的路由器.js文件：

const RouterComponent = ({ authenticated }) => {
return (
    <Router>
        <Overlay>
            <Stack key="root" hideNavBar>
                <Stack key="authentication" >
                    <Scene key="login"
                        component={LoginForm}
                        hideNavBar
                        initial={!authenticated} />
                </Stack>
                <Stack
                    back={false}
                    key="main"
                    initial={authenticated}
                    type={ActionConst.RESET}>
                    <Lightbox key="mainScreen">
                        <Scene
                            hideNavBar
                            key="mainScreen"
                            component={Parking}
                            initial={authenticated}
                        />
                </Stack>
            </Stack>
        </Overlay>
    </Router>
);
};
export default RouterComponent;

希望对您有所帮助！！