HeaderRight 按钮不可点击（React Native）

Question

我在 React Native Navigation v5 headerRight Buttons 中遇到了一个奇怪的错误。我目前在反应本机导航屏幕中将 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>

Answer 1

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

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

Answer 2

尝试为 zIndex 提供更高的值（可能为 100）或提供 headerMode: float 如果这也不起作用，请尝试更新您的软件包。

Answer 3

如果它对其他人有帮助，我写了这段代码，它的可触摸部分不可点击，但将 <> 替换为并且它可以工作

        navigation.setOptions({
            headerRight: () => (
                <TouchableWithoutFeedback onPress={() => console.log("clicked")}>
                    <>
                        {showCheckBoxes && <Text style={{color: "white"}}>Cancel</Text>}
                        {!showCheckBoxes && <View style={{padding: 5, marginRight: 15}}>
                            <Ionicons name="md-trash" size={22} color="white"/>
                        </View>}
                    </>
                </TouchableWithoutFeedback>
            ),
        });