React Native实现页面导航后Expo显示空白屏，请求代码排查

你的代码里存在几个明显问题，导致Expo显示空白屏，逐一修复即可：

1. Home页面的核心错误 #

(1) 组件名未遵循首字母大写规范 #

React组件必须首字母大写，你定义的home是小写，会被React识别为原生HTML标签而非自定义组件，直接导致渲染失败。

(2) 未导入Button组件 #

代码中使用了<Button>但没有从react-native导入，导致组件无法识别。

(3) 未接收navigation参数 #

页面跳转需要的navigation对象是React Navigation通过props传递给页面组件的，你的组件没有接收这个参数，直接调用navigation.navigate会触发报错。

(4) 多余导入NavigationContainer #

NavigationContainer只需要在根组件（App.js）中导入一次，Home页面不需要这个导入。

修复后的Home页面代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';

// 组件名改为首字母大写
const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      {/* 现在可以正常调用navigation.navigate */}
      <Button onPress={() => navigation.navigate('login')} title='Next Screen'/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Home

2. App.js的注意事项 #

• 确保./screens/login路径正确，文件实际存在；建议文件名遵循首字母大写规范（改为Login.js，导入时对应import LoginScreen from './screens/Login'），避免路径或组件识别问题。
• 当前App.js的逻辑本身没有问题，只要Home页面修复后，导航容器就能正常渲染页面。

修复以上问题后，重新启动Expo项目，空白屏问题应该就能解决，Home页面会正常显示，点击按钮也能跳转到Login页面。

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