React-Native-cli报错：Undefined is not a function，添加Stack Screen登录页遇问题

从错误截图来看，这是React Navigation的典型配置问题，下面是针对性的解决步骤：

1. 确认导航容器的包裹 #

React Navigation v5+要求所有导航组件必须被NavigationContainer包裹，之前Tab View能正常运行大概率是因为原有配置包含了这个容器，但替换Stack时可能不慎移除。补全后的基础结构示例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
        {/* 其他页面配置 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 检查依赖完整性 #

如果是首次引入Stack导航，可能缺少核心依赖，执行以下命令补装：

npm install @react-navigation/native @react-navigation/stack
# 或使用yarn
yarn add @react-navigation/native @react-navigation/stack

React Native项目还需要补充原生依赖：

npx expo install react-native-screens react-native-safe-area-context

3. 修正页面组件的navigation接收 #

如果Login页面里调用了navigation.navigate等方法，但未通过props正确接收navigation对象，也会触发错误。确保组件的参数配置正确：

function LoginScreen({ navigation }) {
  return (
    <Button title="进入首页" onPress={() => navigation.navigate('Home')} />
  );
}

4. 调整嵌套导航层级（如果是Tab转Stack的场景） #

如果是要把登录页设为根导航，之后跳转原有Tab页面，需要保证层级嵌套正确，示例结构：

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 原有Tab导航组件
function TabNavigator() {
  return (
    <Tab.Navigator>
      {/* 原Tab页面配置 */}
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="MainTabs" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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