代码之家  ›  专栏  ›  技术社区  ›  Leonard

React Navigation v5 Redux

  •  -1
  • Leonard  · 技术社区  · 10 月前

    在尝试从反应导航4升级到5时,我遇到了反应原生问题。 我在设置组件的底部有这个:

    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(按钮)如预期的那样显示在Screens headerRight上。但在React Navigation v5下,它没有。根据文档,您的所有标头选项都必须在Navigation.js文件中声明。但我从未见过这个ReduxSettings.navigationOptions在互联网上的任何地方被使用,无论是哪个反应导航版本。

    我不能简单地将此headerRight TouchableOpacity移出设置组件并放入我的导航文件中,因为我需要该redux状态来保存。

    我想我的核心问题是我不知道这到底是什么:ReduxSettings.navigationOptions,以及它的react navigation v5替代品。

    如果有人能找到一些有用的信息,非常感谢。

    1 回复  |  直到 10 月前
        1
  •  1
  •   Code2point0    10 月前

    对于导航,如果您正在进行大型项目,我建议您使用expo路由器。

    1. 在React Navigation v5中,像headerRight这样的屏幕选项应该是 移动到导航器中的选项道具中。
    2. 在组件中使用navigation.setOptions动态设置 或更新标题选项。