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 },
});

在这种情况下，一旦按照AppWithNavigationState中的操作将AppNavigator连接到Redux，MyTabNavigator将自动作为导航道具访问导航状态。

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

1 个答案: