如何修改Stack Navigator选项右侧头部颜色？修复undefined报错

嘿，我来帮你搞定这两个问题——undefined is not an object的报错，还有把右侧头部改成蓝色的需求！

为啥会出现这个报错？ #

你遇到的这个错误，核心原因是在静态的navigationOptions里直接调用navigation方法时，没有正确拿到navigation对象。因为static方法属于类本身，没法直接访问组件实例的this.navigation，所以当你在onPress里写导航逻辑时，就会触发“undefined”的错误。

完整修复代码 + 右侧头部改色 #

下面是调整后的代码，既解决了报错，也实现了右侧头部的蓝色样式：

static navigationOptions = ({ navigation }) => ({
  headerTitle: "Share To Feed",
  headerTitleStyle: { 
    paddingLeft: "20%", 
    paddingRight: "20%" 
  },
  headerStyle: { 
    paddingRight: 10, 
    paddingLeft: 10 
  },
  // 修复左侧按钮的onPress报错
  headerLeft: (
    <TouchableOpacity 
      onPress={() => navigation.goBack()} // 通过参数获取navigation，不再undefined
      style={{ padding: 8 }} // 给按钮加内边距，优化点击区域
    >
      <Icon name={"close"} size={30} />
    </TouchableOpacity>
  ),
  // 设置右侧蓝色头部按钮
  headerRight: (
    <TouchableOpacity 
      onPress={() => {
        // 这里替换成你右侧按钮的实际逻辑，比如提交分享
        console.log("准备分享内容");
      }}
      style={{ 
        backgroundColor: "#165DFF", // 用一个舒服的蓝色值
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderRadius: 6 // 加个圆角更美观
      }}
    >
      <Icon name={"send"} size={24} color="#ffffff" /> {/* 图标用白色，和蓝色背景对比 */}
    </TouchableOpacity>
  )
});

几个关键注意点 #

• 获取navigation对象：把static navigationOptions改成接收navigation参数的函数形式，这样就能在onPress里正常调用navigation.goBack()、navigation.navigate()这些方法了。
• 右侧头部样式：给headerRight里的TouchableOpacity设置backgroundColor属性就能改成蓝色，我用了一个偏稳重的蓝，你也可以换成任意你想要的颜色值（比如"blue"或者十六进制色值）。
• 优化点击体验：给TouchableOpacity加一点内边距，让点击区域更大，用户体验更好；同时把图标颜色改成白色，避免和蓝色背景混在一起看不清。
• 如果你用的Icon是react-native-vector-icons里的组件，记得确认已经正确安装并引入，不然也可能出现组件未定义的错误哦。

内容的提问来源于stack exchange，提问作者Shashika Virajh