Estoy tratando de aprender a reaccionar nativo y tengo un problema. Aquí uso la navegación por pestañas y quiero agregar una imagen en el lado derecho de mis encabezados y cuando los usuarios tocan esa imagen, quiero usar el navegador, pero no funciona.
import React, { useEffect, useState } from 'react' import { View, StyleSheet, Image, TouchableOpacity } from 'react-native' import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { createStackNavigator } from '@react-navigation/stack'; const TabNavigation = ({ navigation }) => { return ( enter code here <Tab.Screen name="Home" component={HomeScreen} options={{ headerTitle: () => (<Image source={require('../Images/Floody.png')} />), headerStyle: { height: 100 }, headerTitleAlign: 'center', headerRight: () => ( <TouchableOpacity> <Image source={require('../Images/profile.jpg')} /> </TouchableOpacity> ), tabBarIcon: ({ focused }) => focused ? <HomeImageColorfull /> : <HomeImageBlack /> }} />El marco de navigation pasa el objeto de navegación a las options de la pantalla. Por lo tanto, puede implementar una función onPress para su TouchableOpacity de su componente headerRight y usar el objeto de navigation de las opciones.
<Tab.Screen name="Home" component={HomeScreen} options={({navigation}) => ({ headerTitle: () => (<Image source={require('../Images/Floody.png')} />), headerStyle: { height: 100 }, headerTitleAlign: 'center', headerRight: () => ( <TouchableOpacity onPress={() => navigation.navigate("SomeScreenToNavigateTo")}> <Image source={require('../Images/profile.jpg')} /> </TouchableOpacity> ), tabBarIcon: ({ focused }) => focused ? <HomeImageColorfull /> : <HomeImageBlack /> })} />