Redux坚持使用React导航

时间:2019-01-30 13:10:57

标签: react-native redux react-navigation redux-persist

我使用Redux-persist存储config.autologin属性。 当我创建一个React-navigation栈时,我想检查autoloign值,但是目前状态还没有被补充。 我以为PersistGate是我所需要的,但这不是事实。 你能帮助我吗? 谢谢

App.js

export default class App extends React.Component {
  render() {
    return (
      <Provider store={reduxStore}>
        <PersistGate loading={null} persistor = {persistor}>
          <AppContainer
            ref={navigatorRef => {
              NavigationService.setTopLevelNavigator(navigatorRef);
            }}
          />
        </PersistGate>
      </Provider>
    );
  }
}

reduxStore

const persistState = {
    key: 'root',
    storage,
    whitelist: ['config']
}

const persistedReducer = persistReducer(persistState, reducers)
export const reduxStore = createStore(persistedReducer, devToolsEnhancer({ realtime: true }))
export const persistor = persistStore(reduxStore)

AppNavigation

selectInitialRoute = () =>{
    if(reduxStore.getState().config.autoLogin)
        return 'DrawerStack'
    else
        return 'Home'
}

const defaultNavigation = createStackNavigator({
    Home: loginNavigation,
    DrawerStack: defaultDrawerNavigation
}, {
    initialRouteName: this.selectInitialRoute(),
    defaultNavigationOptions: {
        header: null
    },
}
)

const AppContainer = createAppContainer(defaultNavigation);

export default AppContainer

1 个答案:

答案 0 :(得分:1)

我的应用中也有类似情况。我有两个抽屉:LoggedDrawer和UnloggedDrawer,我需要在初始化它们之前检查用户是否已登录/注销以显示每种状态的特定抽屉。

您可能会看到状态已在render方法中正确更新。如果您想事先获得此状态,则需要 getDerivedStateFromProps

我相信您的情况会是这样:

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.autoLogin !== prevState.autoLogin) {
    return 'Home'
  } else {
    return 'DrawerStack'
  }
}

因此,您将拥有来自redux(nextProps)和prevState(来自组件的状态)的状态,然后您将检查它们是否不同,然后采取相应措施。

希望有帮助。