React native:如何导航嵌套的导航器(由组件包装)

npm install @react-navigation/native

import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 创建堆栈导航器
const Stack = createStackNavigator();
const StackNavigator = () => (
  <Stack.Navigator>
    {/* 定义堆栈导航器的屏幕 */}
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
);

// 创建标签导航器
const Tab = createBottomTabNavigator();
const TabNavigator = () => (
  <Tab.Navigator>
    {/* 定义标签导航器的屏幕 */}
    <Tab.Screen name="Tab1" component={Tab1Screen} />
    <Tab.Screen name="Tab2" component={Tab2Screen} />
  </Tab.Navigator>
);

// 创建包含嵌套导航器的组件
const AppNavigator = () => (
  <NavigationContainer>
    <StackNavigator />
  </NavigationContainer>
);

export default createAppContainer(AppNavigator);

import React from 'react';
import { AppRegistry } from 'react-native';
import AppNavigator from './AppNavigator';

const App = () => <AppNavigator />;

AppRegistry.registerComponent('MyApp', () => App);