使用React Navigation（React Native）进行条件路由

Question

构建一个React Native应用程序，我希望根据初始选择屏幕的状态将用户发送到下一个屏幕。因此，如果选择了1个项目，则应将用户带到Single屏幕。如果选择了多个项目，则应将用户带到Multiple屏幕。

正如您所看到的，我制作了自定义headerLeft和headerRight组件。我更喜欢保持路由方式，但不知何故要将初始状态添加到此上下文中。有没有办法？

如果我可以将导航选项与routes.js文件分离并将其放入屏幕组件本身中，那就太棒了。但是从我所研究的内容来看，似乎navigationOptions无法直接访问状态。

以下是相关代码（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"
      }
    })
  }
);

- Yoon Lee

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: ...
  };
}

我希望这能满足你的需求。在选择组件后，你需要设置参数。还有另一种动态设置初始状态的方法。请注意保留HTML标签。

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

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

- Vishu Bhardwaj