时间戳

首页 > 解决方案 > 与 Redux 一起使用的 React-Native 最佳导航解决方案

react-native - 与 Redux 一起使用的 React-Native 最佳导航解决方案

问题描述

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

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

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

标签： react-nativereduxreact-reduxreact-navigation

解决方案

它已经写在这里了。您可以使用 react-navigation-redux-helpers 来传递您自己的导航道具。还要检查这个例子。

万一上述链接被删除，以下是链接本身的步骤（复制） -

分步指南

以下步骤适用于 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 将自动访问导航状态作为导航道具。

推荐阅读