适用于Redux的React-Native的最佳导航解决方案

Question

似乎从2018年秋季开始，React Navigation可能是React-Native最强大的导航解决方案，它正在放弃Redux支持。

警告：在将于2018年秋季发布的React Navigation的下一个主要版本中，我们将不再提供有关如何与Redux集成的任何信息，它可能会停止工作。将在React Navigation问题跟踪器上发布的与Redux相关的问题将立即关闭。 Redux集成可能会继续工作，但在对库进行任何设计决策时，不会对其进行测试或考虑。

---

现在，还有其他库可以与React-Native + Redux完美配合吗？

Answer 1

它已经写了here。您可以使用react-navigation-redux-helpers来传递自己的导航道具。另外请检查this示例。

如果以上链接被删除，以下是链接本身要遵循的步骤（COPIED） -

分步指南

以下步骤适用于react-navigation@^2.3.0和react-navigation-redux-helpers@^2.0.0-beta。

首先，您需要将react-navigation-redux-helpers包添加到项目中。

yarn add react-navigation-redux-helpers

要么

npm install --save react-navigation-redux-helpers

以下是如何在Redux应用程序中使用导航器的最小示例：

import {
  createStackNavigator,
} from 'react-navigation';
import {
  createStore,
  applyMiddleware,
  combineReducers,
} from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';

const AppNavigator = createStackNavigator(AppRouteConfigs);

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
  nav: navReducer,
  ...
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

const App = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
  state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(
  appReducer,
  applyMiddleware(middleware),
);

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

执行此操作后，导航状态将存储在Redux存储中，此时您可以使用Redux调度功能触发导航操作。

请记住，当导航器被赋予导航道具时，它会放弃对其内部状态的控制。这意味着您现在负责持久化其状态，处理任何深层链接，处理Android中的硬件后退按钮等。

嵌套时，导航状态会自动从一个导航器传递到另一个导航器。请注意，为了让子导航器从父导航器接收状态，应将其定义为屏幕。

将此应用于上面的示例，您可以将AppNavigator定义为包含嵌套的TabNavigator，如下所示：

const AppNavigator = createStackNavigator({
  Home: { screen: MyTabNavigator },
});

在这种情况下，一旦您将AppNavigator连接到Redux，就像在AppWithNavigationState中一样，MyTabNavigator将自动访问导航状态作为导航道具。