React导航tabPress防止父级导航器的默认设置在所有选项卡按钮上都不起作用

import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const ParentNavigator = () => {
  const [selectedTab, setSelectedTab] = useState('Home');

  const handleTabPress = (tabName) => {
    setSelectedTab(tabName);
  };

  useEffect(() => {
    // Perform custom logic when selectedTab changes
    // For example, update child navigator's routes
    // or execute other operations
  }, [selectedTab]);

  return (
    <View>
      <TouchableOpacity
        onPress={() => handleTabPress('Home')}
        style={selectedTab === 'Home' ? styles.selectedTabButton : styles.tabButton}
      >
        <Text>Home</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => handleTabPress('Profile')}
        style={selectedTab === 'Profile' ? styles.selectedTabButton : styles.tabButton}
      >
        <Text>Profile</Text>
      </TouchableOpacity>
      {/* Add more tab buttons as needed */}
    </View>
  );
};

const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={ParentNavigator} />
      <Tab.Screen name="Profile" component={ParentNavigator} />
      {/* Add more screens as needed */}
    </Tab.Navigator>
  );
};

export default App;