React native 如何在多个屏幕之间进行底部选项卡导航？

大家好

当我意识到我有一个版本错误时，我正在创建我的SocialApp：

因此，我需要在代码中使用新版本的

react导航/底部选项卡。但我发现所有教程都有类似的结构：

在代码示例中，它们不使用
@react navigation/stack
他们使用
NavigationContainer
作为默认导出（我有
React.Component
，在
App.js
所有代码都写在一个
App.js
文件中，没有人使用指向其他屏幕的链接（例如，
ProfileScreen
，
SearchScreen
，
MessageScreen
）
以下是我看过的教程列表：



我拥有的代码：

App.js


import*作为来自“React”的React
从“react native”导入{Text，View}
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}
从“@expo/vector icons”导入{MaterialCommunityIcons}
从“@expo/vector icons”导入{Ionicons}
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“反应导航”导入{createAppContainer，createSwitchNavigator}
从“./screens/LoardingScreen”导入LoardingScreen
从“./screens/LoginScreen”导入LoginScreen
从“./screens/RegisterScreen”导入注册表屏幕
从“./screens/HomeScreen”导入主屏幕
从“./screens/ProfileScreen”导入ProfileScreen
从“./screens/MessageScreen”导入MessageScreen
从“./screens/SearchScreen”导入SearchScreen
从“firebase”导入firebase；
导入“firebase/auth”；
从“firebase”导入{initializeApp}
var firebaseConfig={
apiKey:/*谷歌Firebase API信息*/
};
firebase.initializeApp（firebaseConfig）；
/*创建具有4个屏幕的底部选项卡导航器：主页、消息、配置文件、搜索*/
const AppTabNavigator=createBottomTabNavigator(
{
主页：{
屏幕：主屏幕，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
信息：{
屏幕：MessageScreen，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
简介：{
屏幕：ProfileScreen，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
搜索：{
屏幕：搜索屏幕，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
}
},
{
选项卡选项：{
activeTintColor:#161F3D“，
颜色：“B8BBC4”，
showLabel:错误
}
}  
);
/*通过电子邮件身份验证为Firebase创建stack navigator，我有两个屏幕：登录和注册以登录我的应用程序*/
const AuthStack=createSwitchNavigator({
登录：LoginScreen，
注册：注册屏幕
})
/*App.js中的默认导出*/
导出默认createAppContainer(
createSwitchNavigator(
{
Loarding：LoardingScreen，
App:AppTagNavigator，
Auth:AuthStack
},
{
初始路由名称：“Loarding”
}
)
)；