this.props.navigation 与反应导航中的 NavigationActions

Question

NavigationActions 支持以下操作，但当我们使用 this.props.navigation.

访问辅助函数时，我无法理解每个操作的用法

导航
重置
返回
初始化

那么为什么我们必须导入 NavigationActions？

提前致谢。

Answer 1

这些辅助函数中的每一个都映射到 navigation.dispatch(action)，具有与 NavigationActions 不同的动作对象。

在某些情况下您仍然需要使用它们，例如，当使用 navigate 时，您可以通过指定要在导航器上发生的子操作来更改不止一个级别的导航层次结构你刚刚路由到。

this.props.navigation.navigate("some-root", {param: "value"}, someOtherAction)

其中 someOtherAction 可以是任何操作对象。

您可以找到更多信息here。

Answer 2

它们都有很多用法，但让我举几个例子。

示例 1 setParams

假设您有一个带有 2 个屏幕的 StackNavigator。

const Navigator = StackNavigator({
  Home: { screen: Home },
  Items: { screen: Items },
  Profile: { screen: Profile }
});

现在假设您导航到 Items 屏幕，然后导航到 Profile 屏幕，并且您正在根据 this.props.navigation.state.params.type 列出 Items。假设可以通过 Profile 屏幕设置此类型。

当用户更改类型设置时，您需要重新渲染 Items 屏幕。但是当您从 Profile 屏幕执行 this.props.navigation.goBack() 时，除非您对道具或状态进行一些更改，否则 Items 屏幕将不会重新渲染。

在这个位置 setParams 需要采取行动。尽管您可以在 Profile 屏幕上使用 this.props.navigation.setParams，但它会为当前屏幕设置参数。

NavigationActions 允许您为其他屏幕设置参数 key 属性这些屏幕。

示例 2重置和导航

在您的应用程序中的某个时刻（注销、刷新、通知等），您可能想要重置导航堆栈，然后重新创建具有所需位置的堆栈。

当用户收到通知时，重定向到相关 post/article/message 是预期的行为，当用户想要返回时，用户应该重定向到正确的屏幕。此时，您可以通过组合 reset 和 navigate 操作来模拟用户导航。

这些操作还有很多用例。但最后，如果您不需要它们，则不必导入它们。在某些时候，如果您需要它们，您将了解如何更多地使用它们。

Answer 3

除了@bennygenel 所说的，NavigationActions 也很适合在嵌套堆栈中导航。例如，从一个屏幕导航到不同堆栈中的屏幕。

示例：

index.js

const StackOpportunityNavigator = createStackNavigator(
  {
    MainOpportunity: OpportunityScreen,
    SecondScreen: SecondScreen
  },
  {
    initialRouteName: 'MainOpportunity',
    headerMode: 'none',
    transitionConfig: () => fromLeft(600)
  }
);

const DrawerNavigationOptions = createDrawerNavigator(
  {
    OpportunityStack: { screen: StackOpportunityNavigator },
    History: HistoryScreen
  },
  {
    contentComponent: props => <SideBar {...props} />,
    drawerPosition: 'right',
    headerMode: 'none',
    transitionConfig: () => fromLeft(600)
  }
);

const LoginNavigator = createStackNavigator(
  {
    LoadingScreen: LoadingScreen,
    LoginScreen: LoginScreen,
    DrawerNavigator: DrawerNavigationOptions
  },
  {
    transitionConfig: () => fromLeft(600),
    navigationOptions: {
      header: props => <HeaderBar {...props} />
    }
  }
);

export default LoginNavigator;

现在我可以从 LoginScreen.js 导航到主屏幕（OpportunityScreen.js），方法是编写需要从一个屏幕到另一个屏幕的整个嵌套导航路径：

const navigateToMainScreen = NavigationActions.navigate({
        routeName: 'DrawerNavigator',      
        action: NavigationActions.navigate({
          routeName: 'OpportunityStack',
          action: NavigationActions.navigate({
            routeName: 'MainOpportunity'
          })
        })
      });
_this.props.navigation.dispatch(navigateToMainScreen);

希望对您有所帮助:)

this.props.navigation 与反应导航中的 NavigationActions

this.props.navigation vs NavigationActions in react-navigation

react-native

react-navigation