HeaderRight 按钮不可点击（React Native）

Posted 2023-02-16

【中文标题】HeaderRight 按钮不可点击（React Native）

【英文标题】：HeaderRight Buttons are not clickable (React Native)

【发布时间】：2021-12-01 14:12:45

【问题描述】：

我在使用 React Native Navigation v5 headerRight 按钮时遇到了一个奇怪的错误。我目前在反应原生导航屏幕中将 TouchableOpacity 设置为 headerRight 组件；但是，未触发 onPress 事件。标题（标题区域）的中间似乎有一个不可见的对象，它具有绝对位置，这会阻止 onPress 事件被注册。我尝试使用 zIndex 和 headerMode 值；但是，该按钮仍然不可按下。我只能在按钮位于屏幕的最右侧（即marginRight：0）时按下按钮。任何帮助将不胜感激。

作为参考，我遇到了与以下线程相同的问题：https://github.com/react-navigation/react-navigation/issues/7052

我的代码示例

<StackNavigator.Navigator headerMode='screen'>
  <StackNavigator.Screen
    name='Home'
    component=HomeScreen
    options=
      headerRight: () => (
        <TouchableOpacity
          onPress=() => 
        >
          <Text>Button Text</Text>
        </TouchableOpacity>
      ),
    
  />
</StackNavigator.Navigator>

【问题讨论】：

这段代码看起来不错。你确认它没有打电话给onPress。在onPress 中尝试一些console.log。

是的，我有一个在 onPress 函数内部触发的事件。当我按下按钮的最右上角时它会激活，但是当按钮移向标题的中心时，按钮不再是可按下的。似乎在内置标题顶部有一个视图阻止了 onPress 事件，但我似乎找不到解决方法。

设法解决了这个问题。将 HeaderTitle 设置为空视图会移除阻塞按钮的浮动视图。希望这对某人有帮助????

【参考方案1】：

更新到以下软件包似乎已经为我解决了这个问题：

"@react-navigation/stack": "5.9.3",
"@react-navigation/drawer": "5.9.3",
"@react-navigation/native": "5.7.4",

【讨论】：

感谢拉维的回复。我已将我的软件包更新到最新版本，但这似乎并没有解决问题。但是，我设法弄清楚了这一点。将 HeaderTitle 设置为空视图会移除阻塞按钮的浮动视图。

【参考方案2】：

尝试给 zIndex 提供更高的值，可能是 100 或给 headerMode: float 如果这也不起作用尝试更新你的包。