Estaba tratando de llamar a la función this.props.navigation.goBack() después de modificar el ícono headerLeft:
const Stack = createStackNavigator(); class App extends Component { render() { return ( <NavigationContainer> <Stack.Navigator initialRouteName={'VideoList'} screenOptions={{ headerBackTitleVisible: false, }}> <Stack.Screen name="Video Details" component={VideoDetails} options={{ headerBackTitleVisible: false, headerLeft: ({focused}) => ( <TouchableOpacity onPress={this.props.navigation.goBack()}> <Image source={icons.back} resizeMode="contain" style={{ width: 15, height: 15, marginLeft: 20, tintColor: focused ? COLORS.primary : COLORS.secondary, }} /> </TouchableOpacity> ), }} /> </Stack.Navigator> </NavigationContainer> ); } } Como puede ver, estoy usando una imagen para reemplazar el headerLeft , sin embargo, al hacer clic en el botón a través de TouchableOpacity , no me redirige a la pantalla anterior. El botón Atrás no retrocede usando this.props.navigation.goBack();
¿Algúna idea de cómo arreglar esto?
por favor intente esto
headerLeft: ({onPress}) => ( <TouchableOpacity onPress={onPress}> {...} </TouchableOpacity> )