Estoy experimentando un error extraño con los botones de encabezado derecho de React Native Navigation v5. Actualmente tengo un conjunto TouchableOpacity como un componente headerRight en la pantalla de navegación nativa de reacción; sin embargo, el evento onPress no se desencadena. Parece que hay un objeto invisible en el medio del encabezado (área de título) que tiene una posición absoluta, lo que impide que se registre el evento onPress. Intenté jugar con los valores de zIndex y headerMode; sin embargo, el botón aún no se puede presionar. Solo puedo presionar el botón cuando está ubicado en el extremo derecho de la pantalla (es decir, marginRight: 0). Cualquier ayuda sería muy apreciada.
Como referencia, me encuentro con los mismos problemas que el siguiente hilo: https://github.com/react-navigation/react-navigation/issues/7052
Ejemplo de mi código
<StackNavigator.Navigator headerMode='screen'> <StackNavigator.Screen name='Home' component={HomeScreen} options={{ headerRight: () => ( <TouchableOpacity onPress={() => {}} > <Text>Button Text</Text> </TouchableOpacity> ), }} /> </StackNavigator.Navigator>Actualizar a los siguientes paquetes parece haberlo resuelto para mí:
"@react-navigation/stack": "5.9.3", "@react-navigation/drawer": "5.9.3", "@react-navigation/native": "5.7.4",Intente dar valores más altos a zIndex, puede ser 100 o dar headerMode: float si eso no funciona, intente actualizar sus paquetes.