如何使用React导航在react Native App中处理TabNavigator选项卡项上的单击事件？

npm install @react-navigation/native

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { TouchableOpacity } from 'react-native';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    // 屏幕组件内容
  );
}

function ProfileScreen() {
  return (
    // 屏幕组件内容
  );
}

// 其他选项卡项的屏幕组件...

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        {/* 其他选项卡项 */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

import { TouchableOpacity, Text } from 'react-native';

function HomeScreen({ navigation }) {
  const handlePress = () => {
    // 处理单击事件的逻辑
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>Home Screen</Text>
    </TouchableOpacity>
  );
}