React Native TypeScript Expo项目导航配置后无内容显示问题求助

看起来你遇到的问题确实和同时安装了两个冲突的导航栈依赖有关——@react-navigation/stack（基于JS的传统栈导航）和@react-navigation/native-stack（基于原生组件的高性能栈导航）不能同时混用，这会导致内部逻辑冲突，最终让你的界面无法正常渲染。下面是具体的解决方案：

步骤1：清理冲突的依赖 #

首先卸载掉不需要的@react-navigation/stack包，因为你已经安装了更适合Expo项目的native-stack：

npm uninstall @react-navigation/stack
# 如果你用yarn的话：
# yarn remove @react-navigation/stack

步骤2：修正代码中的导航器导入 #

把原来的createStackNavigator替换为native-stack提供的createNativeStackNavigator，修改你的App.tsx：

// 替换这一行
// import { createStackNavigator } from "@react-navigation/stack";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// 对应的导航器初始化也改成：
const RootStack = createNativeStackNavigator<RootStackParamList>();

步骤3：确认其他代码无需修改 #

你的RootStackParamList类型定义、HomeScreen组件以及NavigationContainer的包裹方式都是正确的，不需要调整。这里贴出修正后的完整App.tsx供参考：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { RootStackParamList } from "./types";
import HomeScreen from "./screens/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";

const RootStack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Home">
        <RootStack.Screen name="Home" component={HomeScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

步骤4：重启项目并清除缓存 #

执行以下命令确保依赖完全更新，同时清除Expo的缓存，避免旧依赖残留：

npm install
expo start -c

补充说明 #

React Navigation的文档有时候容易让初学者混淆这两个栈导航包：

• @react-navigation/stack是纯JS实现的导航栈，兼容性更广但性能稍弱；
• @react-navigation/native-stack则是基于iOS和Android原生导航组件实现的，更适合Expo和RN原生项目，性能更好。

同时安装两者会导致导航器的内部逻辑冲突，这就是编译器提示“多个导航依赖”的原因，只需要保留其中一个即可，Expo项目优先选native-stack。

备注：内容来源于stack exchange，提问作者Mathew