如何使用react native在选项卡之外导航？

npm install @react-navigation/native

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator>
      {/* 在这里定义堆栈导航的屏幕 */}
    </Stack.Navigator>
  );
};

export default AppNavigator;

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

const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const HomeScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
    </Tab.Navigator>
  );
};

const Tab1Screen = () => {
  return (
    // 在这里定义Tab1的内容
  );
};

const Tab2Screen = () => {
  return (
    // 在这里定义Tab2的内容
  );
};

const DetailsScreen = () => {
  return (
    // 在这里定义Details的内容
  );
};

export default AppNavigator;

import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const Tab1Screen = () => {
  const navigation = useNavigation();

  const navigateToDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <Button title="Go to Details" onPress={navigateToDetails} />
  );
};