导航到屏幕时更改所选选项卡

Question

我正在构建 React Native 应用程序，我的应用程序上现在有 2 个屏幕。

首页：

import { StyleSheet, Text, View, Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type homePropsType = NativeStackScreenProps<StackScreens, 'Home'>;

export const Home = (props : homePropsType) => {
    const {navigation} = props;

    const goToProfile =() =>{
    navigation.navigate('Profile'); 
}

  return (
    <View style={styles.container}>
      <Text>
        HOME!
      </Text>

      <Button title='profile' color="blue" onPress={goToProfile}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

简介：

import { StyleSheet, Text, View ,Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type profilePropsType = NativeStackScreenProps<StackScreens, 'Profile'>;

export const Profile = (props: profilePropsType) => {

    const {navigation, route} = props;

    const goToHome =() =>{
        navigation.navigate('Home'); 
    }

  return (
    <View style={styles.container}>
      <Text>
        profile
      </Text>

      <Button title='home' color="blue" onPress={goToHome}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的堆栈：

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";


export type StackScreens = {
  Home : undefined,
  Profile : undefined
}

const Stack = createNativeStackNavigator<StackScreens>();

export const MyStack = (props: any) => (
  <Stack.Navigator screenOptions={{ title: "", headerShown: false }} >
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Profile" component={Profile} />
  </Stack.Navigator>
);

我的选项卡：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";
import { MyStack } from "./MyStack";
import { Icon } from "react-native-elements";

export type TabScreens = {
  Home : undefined,
  Profile : undefined,
  MyStack : undefined
}


const Tab = createBottomTabNavigator<TabScreens>();

export const MyTab = (props: any) => (
 <Tab.Navigator initialRouteName="MyStack" screenOptions={{
    tabBarStyle:{backgroundColor:"blue"},
    tabBarActiveTintColor:"white",
   headerShown:false,
 }}>
    <Tab.Screen name="MyStack" component={MyStack} options={{tabBarLabel:"home", tabBarIcon:        ({color}) =>(
        <Icon color={color} name="home" type="font-awesome" />)}}/>
    <Tab.Screen name="Profile" component={Profile} options={{ tabBarIcon:({color}) =>(
        <Icon color={color} name="user" type="font-awesome" />)}}/>
 </Tab.Navigator>
);

现在我可以通过按下每个屏幕上的按钮来使用 MyStack 在屏幕之间导航，或者通过按下其中一个选项卡来使用 MyTab 在屏幕之间导航。 我的问题是，我希望当我导航到个人资料屏幕时，例如，个人资料选项卡将成为所选的选项卡。现在，如果我按按钮导航到个人资料屏幕，我将导航到他，但选项卡将保留在主页上。 有没有办法解决这个问题或者应该像那样？