React-Navigation v5 Redux

Question

我在尝试从 React-navigation 4 升级到 5 时遇到了 React-native 问题。 我的设置组件底部有这个：

const ConnectedSettings = connectActionSheet(Settings);

const mapStateToProps = state => ({
//bunch of states
});

const ReduxSettings = connect(mapStateToProps, {
//bunch of functions
})(SettingsWrapper);

ReduxSettings.navigationOptions = ({navigation, route}) => {
  return {
    headerRight: () => (
      <TouchableOpacity
        style={StylesUtil.headerRightButton}
        onPress={navigation.getParam('onSavePress')}>
        <View style={StylesUtil.headerRightButtonTitleWrapper}>
          <Text style={StylesUtil.headerRightButtonTitle}>Save</Text>
        </View>
      </TouchableOpacity>
    ),
  };
};

export default ReduxSettings;

在Navigation.js文件中，没有导入ReduxSettings屏幕。只是设置。看起来状态好像是与组件一起导入的。

在 React-Navigation v4 下，此 TouchableOpacity（按钮）按预期显示在屏幕的 headerRight 上。但在 React-Navigation v5 下，情况并非如此。根据文档，所有标头选项都必须在 Navigation.js 文件中声明。但我从未见过这个 ReduxSettings.navigationOptions 在互联网上的任何地方被使用，无论哪个 React-navigation 版本。

我不能简单地将 headerRight TouchableOpacity 移出“设置”组件并移至我的导航文件中，因为我需要保存该 redux 状态。

我想我的核心问题是我不知道这到底是什么：ReduxSettings.navigationOptions 及其’react-navigation v5 替代品。

如果有人甚至可以挖掘一些有用的信息，非常感激。

Answer 1

对于导航，如果您正在处理大型项目，我建议您使用 expo-router。

1. 在 React Navigation v5 中，像 headerRight 这样的屏幕选项应该是 移至导航器中的 options 属性中。
2. 在组件内使用navigation.setOptions来动态设置 或更新标题选项。