如何根据 redux 状态选择 react-native 应用程序的启动屏幕？

Question

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

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

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

我们来看这个例子：https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample.
它 generates 初始导航状态，但它是静态的：

// 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

前段时间我遇到了同样的问题，我会告诉你我是如何解决的：在我名为 App.js 的第一个屏幕中，我放置了 redux 配置：

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

在Main.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 我选择是显示登录组件还是初始组件。那是我的 Router.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;

希望对你有帮助！！

如何根据 redux 状态选择 react-native 应用程序的启动屏幕？

How to choose starting screen of react-native app based on redux state?

react-native

redux

react-navigation