Expo环境下React Native react-navigation白屏问题排查求助

1. 检查导航基础配置 #

• 确认根组件被NavigationContainer正确包裹，示例：

  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  const Stack = createStackNavigator();
  
  export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="OnBoardingScreen1">
          <Stack.Screen name="OnBoardingScreen1" component={OnBoardingScreen1} />
          {/* 其他页面配置 */}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

• 核对Stack.Screen的name和component是否对应，避免拼写错误；确认initialRouteName指向的页面已在screens中配置。

2. 修复资源路径问题 #

• 页面中的图片资源改用require方式引用（Expo Go推荐），避免使用绝对路径，示例：

  <Image source={require('../assets/onboard1.png')} />
  

• 运行expo r -c清除Expo缓存，重启项目，解决缓存导致的资源解析异常。

3. 验证依赖兼容性 #

• 检查react-navigation系列依赖（@react-navigation/native、@react-navigation/stack、react-native-screens、react-native-safe-area-context）版本与当前Expo SDK版本是否匹配，核对package.json中的版本号是否符合官方兼容要求。
• 执行以下步骤重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

4. 逐步排查组件渲染问题 #

• 先简化导航配置，只保留一个页面组件，确认是否能正常显示，再逐步添加其他页面，定位问题页面。
• 检查页面组件的useEffect等生命周期钩子，是否存在未处理的异步逻辑（比如未捕获的Promise错误）导致渲染阻塞，可添加try/catch包裹异步操作。

5. 针对性处理资源解析错误 #

• 查看控制台具体报错的资源类型（图片/字体/其他）：
  • 若为字体：确认已通过expo-font正确加载，并在app.json中配置对应fontFamily；
  • 若为本地资源：确认文件路径正确，文件未损坏，且已包含在Expo项目的assets目录中。

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