Expo React Native页面导航问题：应用无报错但无法加载求助

你的应用无法加载的核心原因是RootStack组件没有返回任何JSX内容。箭头函数定义组件时，如果函数体是多行代码，必须显式使用return语句返回JSX，或者将JSX用圆括号包裹。

修正后的RootStack组件代码 #

第一种方式（显式return）：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';

const Stack = createNativeStackNavigator();

const RootStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='LoginScreen'>
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
export default RootStack;

第二种方式（括号包裹JSX，隐式返回）：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';

const Stack = createNativeStackNavigator();

const RootStack = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)
export default RootStack;

额外检查点 #

• 确认LoginScreen组件是正确导出的（比如用export default LoginScreen），且文件路径../screens/LoginScreen没有错误。
• 在Expo环境中，react-native-gesture-handler需要在项目入口文件（App.js）最顶部导入，建议在App.js中添加：

  import 'react-native-gesture-handler';
  import RootStack from './app/navigators/RootStack';
  
  export default function App() {
    return <RootStack />;
  }
  

• 确保所有依赖版本兼容，运行npx expo install可以自动同步Expo官方适配的依赖版本，避免版本不匹配问题。

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