Question

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

我使用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 app的启动画面？

1 个答案: