Question

使用React-Native（0.19）和Redux，我能够在React Components中从一个场景导航到另一个场景，如下所示：

this.props.navigator.push({
 title: "Registrations",
 component: RegistrationContainer
});

此外，我希望能够从应用程序的任何位置（缩减器和/或操作）将组件推送到导航器。

示例流程：

用户填写表格并按提交
我们将表单数据发送到操作
操作设置表明它已开始通过电线发送数据
操作提取数据
完成后，操作将发送提交已结束
操作导航到最近创建的新数据

我用我的方法看到的问题：

导航器在道具中，而不是状态。在reducer中，我没有访问道具
我需要将navigator传递给任何需要它的动作。

我觉得我遗漏了一些关于如何从操作中访问Navigator而不作为参数发送的简单方法。

Answer 1

在我看来，使用Redux处理导航的最佳方法是react-native-router-flux，因为它可以将所有导航逻辑委托给Redux：

您可以更改减速器的路线;
您可以将路由器连接到商店并发送自己的操作，以通知商店路线更改（BEFORE_ROUTE，AFTER_ROUTE，AFTER_POP，{{1} }，BEFORE_POP，AFTER_DISMISS）;

一个例子

以下是一个示例，说明如何轻松地将当前聚焦的路线保存在商店中并在组件中处理它（将意识到聚焦）：

<强> 1。将BEFORE_DISMISS连接到Redux
将<Route>连接到Redux很容易，而不是：

<Route>

你可以写：

<Route name="register" component={RegisterScreen} title="Register" />

您也可以像平常一样简单地将组件本身连接到自己的文件中。

<强> 2。将<Route name="register" component={connect(selectFnForRegister)(RegisterScreen)} title="Register" />连接到Redux
如果您需要通知Redux导航状态（例如，当您弹出路线时），只需覆盖<Router>中包含<Router>组件的react-native-router-flux组件：

import ReactNativeRouter, { Actions, Router } from 'react-native-router-flux'
const Router = connect()(ReactNativeRouter.Router)

现在，当您使用<Router>时，它将连接到商店并触发以下操作：
- Actions.BEFORE_ROUTE
- Actions.AFTER_ROUTE
- Actions.AFTER_POP
- Actions.BEFORE_POP
- Actions.AFTER_DISMISS
- Actions.BEFORE_DISMISS

以this为例说明一下。

第3。在减速机中捕获感兴趣的动作
对于此示例，我有一个global reducer（我保留所有应用程序所需的信息），我在其中设置了currentRoute：

case Actions.AFTER_ROUTE:
case Actions.AFTER_POP:
  return state.set('currentRoute', action.name)

现在，reducer将捕获每个路径更改并使用当前聚焦的路径更新global.currentRoute 您还可以从此处执行许多其他有趣的操作，例如在阵列中保存导航本身的历史记录！

<强> 4。重点更新您的组件
我在名为componentDidUpdate的路径的payment上进行此操作。如果global.currentRoute为payment而前一个global.currentRoute不同，则该组件刚刚关注。

  componentDidUpdate(prevProps) {
    const prevRoute = prevProps.global.currentRoute
    const currentRoute = this.props.global.currentRoute
    if (currentRoute === 'payment' && prevRoute !== currentRoute) {
      this.props.actions.doSomething()
    }
  }

P.S。：记得检查currentRoute === 'payment'，否则你会在每次路线变化时开始doSomething（）！

另外，take a look a the README.md用于学习与Redux集成的其他内容希望它有所帮助，Redux万岁！

Answer 2

也许您可以在动作中传递有关标题和组件的信息，然后使用导航器的组件可以使用状态信息推送正确的场景。

使用React-Native和Redux访问Actions中的导航器

2 个答案:

一个例子