我的标签导航标头按钮不起作用。我该如何修复？

Question

我正在尝试学习反应的本地，我有问题。在这里，我使用标签导航，我想在右侧添加图像，当用户触摸该图像时，我想使用Navigator，但它不起作用。

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 />
          }} />

Answer 1

导航对象由导航框架传递给屏幕的选项。因此，您可以为您的touchableOpacity headeright组件实现onpress函数选项。

<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 />
          })} />