Question

NavigationActions支持以下操作，但当我们使用this.props.navigation访问辅助函数时，我无法理解每个操作的用法。

导航
重置
回
初始化

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

先谢谢。

Answer 1

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

示例1 setParams

假设你有StackNavigator有2个屏幕。

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

现在，我们可以说您导航到Items屏幕，然后导航到Profile屏幕，并根据Items列出this.props.navigation.state.params.type。可以说这种类型可以通过Profile屏幕设置。

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

在此位置this.props.navigation.setParams需要采取措施。虽然您可以在Profile屏幕上使用NavigationActions，但它会为当前屏幕设置参数。

key可让您为其他具有reset属性的屏幕设置参数。

示例2 重置并导航

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

当用户收到通知时，重定向到相关帖子/文章/消息的预期行为以及当用户想要goBack时，用户应该重定向到正确的屏幕。此时，您可以结合使用navigate和model_diff = smf.ols(formula='diff_lrent ~ diff_lpop + diff_lavginc + diff_pctstu', data=rental).fit()操作来模拟用户导航。

这些行动的用例更多。但最后，如果你不需要它们，你就不必进口它们。在某些时候，如果您需要它们，您将了解如何更多地使用它们。

Answer 2

除了@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导航到MainScreen（OpportunityScreen.js）：

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

希望它会有所帮助：）

Answer 3

这些辅助函数中的每一个都映射到navigation.dispatch（action），并使用NavigationActions中的不同操作对象。

在某些情况下您仍然需要使用它们，例如，在使用navigate时，您可以通过在导航器上指定要执行的子操作来更改多个级别的导航层次结构刚刚路过。

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

someOtherAction可以是任何操作对象。

您可以找到更多信息here。

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

3 个答案: