Pressable 在 React Native Navigation 的自定义标题中不起作用

Question

我正在尝试为我正在为 React 导航堆栈标头制作的自定义标头编写一个可按的图标（我遵循的文档是here来制作此自定义标头）。我的按钮有条件地呈现，因为它仅在有要返回的页面（它是后退按钮）时才会显示，因此我将其编写在单独的函数中并在自定义标头中调用它。然而，似乎我对按钮的按下根本没有注册，我似乎不明白为什么。

这是我用来从我的

App.js

文件调用自定义标头函数的代码，该文件包含所有路由...

export default function App() {
    return(
        <PaperProvider>
            <NavigationContainer>
              <Stack.Navigator
                  initialRouteName="Home"
                  screenOptions={{
                      header: NavHead,
                      headerMode: 'float'
                  }}
              >
                <Stack.Screen name="Home" component={Home} />
                ...

              </Stack.Navigator>
            </NavigationContainer>
        </PaperProvider>
    )
}

这是我为自定义标头函数所做的代码...

import React from "react";
import {View, Pressable} from "react-native";
import { getHeaderTitle } from '@react-navigation/elements';
import Text from "./Text"
import {Icon} from "react-native-paper";

function BackButton ({navigation, back}) {
    if (back) {
        return (
            <View>

            <Pressable
                className="z-[1000] "
                onPress={() => {
                    console.log("clicked")
                    navigation.goBack
                }}
            >
                <>
                    <View className="z-10">
                        <Icon
                            source="arrow-left"
                            size={30}
                            color={"white"}
                        />
                    </View>
                    <View className="absolute translate-y-1.5 ">
                        <Icon
                            source="arrow-left"
                            size={30}
                            color={"black"}
                        />
                    </View>
                </>
            </Pressable>
        </View>
        )
    } else{
        return (null)
    }
}
export default function NavHeader ({ navigation, route, options, back }) {
    const title = getHeaderTitle(options, route.name);

    return (
        <View>
                <BackButton navigation={navigation} back={back} className="z-50" />

                <View className="relative" >
                    <Text title={true} black={true} >
                        {title}
                    </Text>
        </View>
    );
};

从上面的代码中，我尝试调整 Nativewind 的 z 索引 - 我用于样式设置的库，但这似乎没有什么区别。我还尝试将 headerMode 作为

float

传递，因为我听说这可能会导致问题，但它似乎没有改变任何东西。奇怪的是，当我使用元素检查器时，该组件确实注册为可触摸组件，但我似乎无法检查它 - 我只能检查标题和标题中的文本。我还为可按下的区域设置了背景颜色，以查看我是否单击了正确的区域，果然，我已经单击了。

我正在使用 Android 进行测试，并插入了 Google Pixel 3a。我使用的 React Native 导航版本是

^6.1.10

，我的 NativeWind 是

4.0.1

，我的 React Native Paper 是

^5.12.3

，我的 React Native 是

 0.73.4

。感谢您的宝贵时间，我将非常感谢我能得到的任何帮助！

Answer 1

发现错误实际上与react-native导航栏无关，而是与我使用react-native-paper的图标作为可按下的唯一组件的方式有关。由于某种原因，当我的可按下按钮中只有该图标时，它无法被按下，但是一旦我添加了文本，它就可以按下。解决方案是更改为react-native-paper按钮