使用 React Navigation (React Native) 的条件路由

Question

构建一个 React Native 应用程序，我会根据初始 Select 屏幕的状态将用户发送到下一个屏幕。因此，如果选择了 1 个项目，它应该将用户带到单一屏幕。如果超过1个，则多屏。

如您所见，我制作了自定义的 headerLeft 和 headerRight 组件。我宁愿以这种方式保持路由，但以某种方式将初始状态添加到此上下文中。有办法吗？

如果我能以某种方式将导航选项与 routes.js 文件分离并将它们放入屏幕组件本身，那就太棒了。但是根据我的研究，导航选项似乎不能直接访问状态。

这里是相关代码(routes.js):

export default StackNavigator(
  {
    Select: {
      screen: Select,
      navigationOptions: ({ navigation }) => ({
        headerLeft: <View />,
        headerRight: (
          <HeaderRight
            navigation={navigation}
            destination=""
            showIcon
          />
        )
      })
    },
    Single: {
      screen: Single,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <HeaderLeft navigation={navigation} destination="back" showIcon />
        ),
        headerRight: (
          <HeaderRight navigation={navigation} destination="SingleSecond" />
        )
      })
    },
    Multiple: {
      screen: Multiple,
      navigationOptions: ({ navigation }) => ({
        headerLeft: <HeaderLeft navigation={navigation} destination="back" />,
        headerRight: (
          <HeaderRight navigation={navigation} destination="MultipleSecond" />
        )
      })
    },
  },
  {
    headerMode: "float",
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.routeName}`,
      headerStyle: { backgroundColor: "#000" },
      headerTitleStyle: {
        color: "#fff",
        textAlign: "center",
        alignSelf: "center"
      }
    })
  }
);

Answer 1

您可以从组件设置参数，这些参数可以从导航选项访问。

this.props.navigation.setParams({ selectionState: "single" });
this.props.navigation.setParams({ selectionState: "multiple" });

您可以从导航选项中访问参数，例如

static navigationOptions = ({navigation}) => {
  let selected = navigation.state.params && navigation.state.params.selectionState;
  return {
    headerRight: ...
  };
}

我希望这能满足您的需求，您需要在组件中选择一些内容后设置参数。还有另一种动态设置初始状态的方法。

function getNavigation (selected = "single") {
  return StackNavigator({
    ...,
    { initialState = selected === "single" ? "Single" : "Multiple" }
  })
}

然后使用选定的参数调用此方法以重置屏幕。

使用 React Navigation (React Native) 的条件路由

Conditional routing using React Navigation (React Native)

reactjs

react-native

react-navigation