我使用react-native-router-fluxredux-persistreact-native中有以下redux个配置.我想在刷新时检索最后一条当前路由,但是在重新加载时路由堆栈被覆盖.

这是reducers/index.js号文件

import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
import { persistStore, autoRehydrate } from 'redux-persist'
import { AsyncStorage } from 'react-native'
import logger from 'redux-logger'

import { startServices } from '../services'
import navigation from './navigation'
import devices from './devices'
import rooms from './rooms'


import { ActionConst } from 'react-native-router-flux'

function routes (state = {scene: {}}, action = {}) {
  switch (action.type) {
    // focus action is dispatched when a new screen comes into focus
    case ActionConst.FOCUS:
      return {
        ...state,
        scene: action.scene,
      };

    // ...other actions

    default:
      return state;
  }
}

export const reducers = combineReducers({
  routes,
  navigation,
  devices,
  rooms
})

const middleware = [logger()]

const store = createStore(
  reducers,
  compose(
    autoRehydrate(),
    applyMiddleware(...middleware)
  )
)

persistStore(store, {storage: AsyncStorage}, function onStoreRehydrate () {
  startServices()
})

export { store, reducers }

编辑:这是index.js,包括它的提供者和场景:

import React, { Component } from 'react'
import { store } from './reducers'
import { Provider, connect } from 'react-redux'
import { Router, Scene, Actions } from 'react-native-router-flux';

import Home from './containers/home'
import Login from './containers/login'
import Device from './containers/device'


const scenes = Actions.create(
  <Scene key="root">
      <Scene key="home" component={Home} />
      <Scene key="login" component={Login} />
      <Scene key="device" component={Device} />
  </Scene>
)

const RouterWithRedux = connect()(Router)

export default class EntryPoint extends Component {
  render () {
    return (
      <Provider store={store}>
        <RouterWithRedux scenes={scenes} />
      </Provider>
    )
  }
}

推荐答案

react-native-router-flux即使与redux一起使用,也无法自行恢复场景.Redux只跟踪状态,所以如果你想保持导航状态,你必须让你的应用在启动时导航到前一个场景.

假设你的redux使用react-native-router-flux,你需要做的就是将应用的初始组件连接到redux以获得你的状态,然后更改场景以匹配.

因此,在为应用程序加载的初始组件场景中,在最后执行类似操作以访问redux应用store :

const mapStateToProps = (state) => {
  const { nav } = state

  return {
    currentScene: nav.scene.name,
  }
}

INITIAL_COMPONENT = connect(mapStateToProps)(INITIAL_COMPONENT)

然后,在该组件的一种生命周期方法中,您可以这样重定向:

const { currentScene } = this.props
const initialScene = "Login"

if (currentScene !== initialScene) {
  Actions[currentScene]()
}

您还可以传入导航到最后一个场景时使用的props ,或者如果redux应用store 没有持续的场景,则可以设置要转到的默认场景.我正在开发的应用程序现在可以很好地保持状态.

React-native相关问答推荐

ITMS—91053:缺少API声明—ReactNative

在原生react 中更改图像源URI时闪烁

Reaction-原生NavBottom设计背景

单击react 本机时如何从同一屏幕更改内容

'未能找到 React 根视图的片段' React Native Android RNScreens

用图像 react native 动画进度条

React Native - 何时调用componentWillUnmount?

ReactJS 应用多种内联样式

如何通过 node ID 获取真实元素?

React Native 错误找不到模块metro-config/src/defaults/blacklist

如何在 react-native 中在图像周围添加阴影

是否可以在 React Native 中隐藏BugReporting extraData?

React Native:无法点击调试菜单

如何删除不需要的expo 模块

使用 applicationIdSuffix 时 React Native 应用程序不会启动

有react-native复选框的例子吗?

如何使用 Expo 在真实的 iOS 设备上运行应用程序?

React Native Navigation 组件路由问题

React Native EXPO Apple 上传失败

当前文件夹中的 react-native init