嘿，这问题我熟！更新依赖后遇到的这些废弃提示，是因为React Navigation从v4版本开始就把核心功能和各个导航器拆分成独立包了，原来的旧API都被弃用了。咱们一步步来修复：

第一步：安装新的依赖包 #

首先得装上拆分后的官方包，打开终端运行这些命令：

# 安装核心依赖
npm install @react-navigation/native react-native-screens react-native-safe-area-context

# 安装底部标签导航和栈导航的包
npm install @react-navigation/bottom-tabs @react-navigation/native-stack

第二步：修改主路由文件（Routes.js） #

原来的StackNavigator要换成createNativeStackNavigator，而且必须用NavigationContainer把整个路由包裹起来，这是v5+的强制要求。修改后的代码如下：

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { TabNavFooter } from "./TabNavFooter";
import { SIGNIN_KEY, SIGNUP_KEY } from "../config/routeKeys";
import { SignupScreen, SigninScreen, MainFeedScreen, CommentScreen, SharePostScreen } from "../screens";

const Stack = createNativeStackNavigator();

export const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="mainfeed">
        <Stack.Screen name="mainfeed" component={TabNavFooter} options={{ headerShown: false }} />
        <Stack.Screen name="signin" component={SigninScreen} />
        <Stack.Screen name="signup" component={SignupScreen} />
        <Stack.Screen name="comments" component={CommentScreen} />
        <Stack.Screen name="sharePost" component={SharePostScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

第三步：修改底部标签导航文件（TabNavFooter.js） #

原来的TabNavigator要换成createBottomTabNavigator，而且TabBarBottom已经完全不需要了——新的createBottomTabNavigator默认就是底部标签栏，废弃的配置项直接删掉就行。修改后的代码：

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Image } from "react-native";
import { MainFeedScreen, WorkoutScreen, VideosScreen, ChatScreen, ProfileMainScreen } from "../screens";
import TAB_NAVIGATOR_IMAGES from "../config/tabNavImgs";

const Tab = createBottomTabNavigator();

export const TabNavFooter = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
          let imageSource;
          switch(route.name) {
            case "mainfeed":
              imageSource = TAB_NAVIGATOR_IMAGES[`${focused ? "mainfeedActive" : "mainfeedInactive"}`];
              break;
            case "workout":
              imageSource = TAB_NAVIGATOR_IMAGES[`${focused ? "workoutActive" : "workoutInactive"}`];
              break;
            case "video":
              imageSource = TAB_NAVIGATOR_IMAGES[`${focused ? "videoActive" : "videoInactive"}`];
              break;
            case "chat":
              imageSource = TAB_NAVIGATOR_IMAGES[`${focused ? "chatActive" : "chatInactive"}`];
              break;
            case "profile":
              imageSource = TAB_NAVIGATOR_IMAGES[`${focused ? "profileActive" : "profileInactive"}`];
              break;
            default:
              imageSource = TAB_NAVIGATOR_IMAGES.mainfeedInactive;
          }
          return (
            <Image 
              source={imageSource} 
              style={{ width: 25, height: 25, tintColor: tintColor, marginBottom: 0 }} 
            />
          );
        },
        tabBarActiveTintColor: "blue",
        tabBarInactiveTintColor: "gray",
      })}
      swipeEnabled={false}
      lazyLoad={true}
      animationEnabled={false}
    >
      <Tab.Screen name="mainfeed" component={MainFeedScreen} options={{ headerShown: false }} />
      <Tab.Screen name="workout" component={WorkoutScreen} options={{ headerShown: false }} />
      <Tab.Screen name="video" component={VideosScreen} options={{ headerShown: false }} />
      <Tab.Screen name="chat" component={ChatScreen} options={{ headerShown: false }} />
      <Tab.Screen name="profile" component={ProfileMainScreen} options={{ headerShown: false }} />
    </Tab.Navigator>
  );
};

关键注意点 #

• v5+的React Navigation采用组件式API，不再是原来的函数式创建方式，所以要习惯用Stack.Navigator和Stack.Screen这种组件结构
• NavigationContainer是整个导航系统的根组件，必须包裹所有导航器
• 原来的tabBarOptions配置现在可以直接合并到screenOptions里，配置逻辑更统一

内容的提问来源于stack exchange，提问作者Shashika Virajh