React Native报错：createStackNavigator未在native-stack中找到

报错直接由API导入不匹配触发：

• @react-navigation/native-stack v6及以上版本不存在createStackNavigator导出，你参考的教程内容过时，混淆了native-stack和普通stack两个不同导航包的API。
• 该导入错误会导致导航组件树渲染崩溃，最终表现为Expo页面空白。

任选以下一种方案修改即可，优先推荐方案1（性能更优，无需额外安装依赖）。

方案1：适配@react-navigation/native-stack的原生API #

这个包的栈实例创建方法为createNativeStackNavigator，仅需修改两处代码即可：

1. 替换导入的API名称
2. 对应修改栈实例创建的调用方法
   修改完成后的完整App.js代码如下：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
// 替换导入的API
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "./screens/homescreen";
import SecondScreen from "./screens/secondscreen"

// 对应修改创建方法
const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name ="Home" component = {Home}/>
        <Stack.Screen name ="SecondScreen" component = {SecondScreen}/>
      </Stack.Navigator>
      <StatusBar style="auto" />
    </NavigationContainer>
  );
};

export default App;

保存后刷新Expo客户端即可正常加载页面。

方案2：对齐教程使用createStackNavigatorAPI #

如果需要完全匹配教程写法，要先安装对应导出该API的JS栈导航包：

1. 在项目根目录执行安装命令：

   npm install @react-navigation/stack
   # 使用yarn的话执行 yarn add @react-navigation/stack
   

2. 仅修改导入语句的包路径即可，其余业务代码无需调整：

   // 替换导入的包路径
   import {createStackNavigator} from "@react-navigation/stack";
   

注意：该方案使用JS实现的栈导航，性能弱于原生栈，且需要额外安装react-native-gesture-handler依赖并在入口文件顶部导入，否则部分机型会出现手势交互报错。

内容的提问来源于stack exchange，提问作者sean froelich