首页 文章

React Native Navigation和Redux Persist

提问于
浏览 次
10

我正在尝试将redux-persist与wix react-native-navigation集成 . 但是，我无法找到任何说明集成两个库所需的样板代码的示例或文档 .

我想知道是否有人想分享他们的解决方案，如果他们已经解决了这个问题？

react-native redux react-native-navigation redux-persist

4 回答

  • 0

    首先，基本设置应该是相似的，有或没有react-native-navigation，如 store.js 中描述in the documentation：

    import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/es/storage' // default: 
localStorage if web, AsyncStorage if react-native
import reducers from './reducers' // where reducers is an object of 
reducers

const config = {
  key: 'root',
  storage,
}

const reducer = persistCombineReducers(config, reducers)

function configureStore () {
  // ...
  let store = createStore(reducer)
  return store

  // We'll skip persistStore for now
  // let persistor = persistStore(store)
  //return { persistor, store }
}

    persistStore 电话已被注释掉，我们将在下面进行注释 . persistStore 方法在其第三个参数中进行回调 . 在恢复/重新水化状态后执行回调 . 这很好，因为这意味着 we can delay starting the screen(s) until the state is rehydrated .

    假设您在App.js中有以下引导代码：

    store = configureStore()

registerScreens(store, Provider)

Navigation.startTabBasedApp({
  tabs: [{...},]
})

    现在我们可以添加persistStore并将引导代码包装在其中，如下所示：

    store = configureStore()

persistStore(store, null, () => {
  registerScreens(store, Provider)

  Navigation.startTabBasedApp({
    tabs: [{...},]
  })
})

    注意：在v4中，传递 config 而不是 null ： persistStore(store, config, callback)

    回复于
  • 15

    如果您希望将它与react-native-navigation v2集成，请在App.js中确保在 registerAppLaunchedListener() 内调用 persistStore() ：

    import { persistStore } from 'redux-persist';
...
Navigation.events().registerAppLaunchedListener(() => {
  persistStore(store, null, () => {
    Navigation.registerComponentWithRedux(...);
    ...
    Navigation.setRoot({...})
     ...
  })
})
    回复于
  • 0

    添加到他的解决方案中，您还可以使用subscribe（）来检查您的用户是否仍然登录 . 这样，如果他们完全关闭应用程序（对于那些具有登录系统的用户），他们就不需要再次登录 . 仅在存储持久存储时调用，您可以在选中此选项后启动应用程序 .

    import {Platform, AsyncStorage, AppState} from "react-native"
    import {Navigation} from "react-native-navigation"
    import {registerScreens} from "./routes"
    import {Provider} from "react-redux"
    import configureStore from "./stores/reduxStore"
    import {Component} from "react"

      const storage = configureStore()

      registerScreens(Provider, storage.store)

let startapp = screen => {
  Navigation.startSingleScreenApp({
    screen: {
      screen, // unique ID registered with Navigation.registerScreen
      navigatorStyle: {
        navBarHidden: true,
        statusBarHidden: false,
        statusBarColor: "white",
        statusBarTextColorScheme: "dark"
      }, // override the navigator style for the screen, see "Styling the navigator" below (optional)
      navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
    },
    drawer: {
      left: {
        screen: "Drawer", // unique ID registered with Navigation.registerScreen
        passProps: {} // simple serializable object that will pass as props to all top screens (optional)
      }
    },
    tabsStyle: {
      // optional, add this if you want to style the tab bar beyond the defaults
      tabBarButtonColor: "#ffff00", // optional, change the color of the tab icons and text (also unselected). On Android, add this to appStyle
      tabBarSelectedButtonColor: "#ff9900", // optional, change the color of the selected tab icon and text (only selected). On Android, add this to appStyle
      tabBarBackgroundColor: "#551A8B", // optional, change the background color of the tab bar
      initialTabIndex: 1 // optional, the default selected bottom tab. Default: 0. On Android, add this to appStyle
    },
    appStyle: {
      orientation: "portrait"
    }
  })
}

storage.persistor.subscribe(() => {
  storage.store.getState().user.logged
    ? startapp("mainscreen")
    : startapp("loginscreen")
})
    回复于
  • 1

    只需按照redux-persist docs中的描述创建存储，然后在index.js文件中在每个屏幕上添加一个包装函数，如此处所示 .

    https://github.com/RajenderDandyal/toDoApp/blob/master/index.js

    现在如果某些屏幕剂量接收更新的商店然后使用store（） . persistor.persist（）与一些if条件检查在这里完成https://github.com/RajenderDandyal/toDoApp/blob/master/src/screens/ToDo/commentsScreen.js

    回复于

相关问题