Expo React Native报错："HomeScreen" is read-only 求助排查

错误原因 #

你在App.js的Stack.Screen组件中错误使用了赋值语法，试图给导入的只读组件变量HomeScreen和LoginScreen重新赋值，触发了"read-only"错误。具体错误写法是component={HomeScreen={}}，这等同于执行HomeScreen = {}，但导入的模块变量默认是只读的，不允许修改。

修复步骤 #

修改App.js中的导航配置代码，将component属性的错误写法修正为直接传入组件引用，同时设置初始路由为Login以满足你预期的显示效果：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from "./screens/LoginScreen";
import HomeScreen from "./screens/HomeScreen";

const Stack = createNativeStackNavigator();

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

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

刘海屏适配优化 #

若要适配刘海屏，可在LoginScreen和HomeScreen中用SafeAreaView替代普通View，避免内容被刘海遮挡：

修改LoginScreen.js：

import { StyleSheet, Text, SafeAreaView } from 'react-native'
import React from 'react'

const LoginScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>LoginScreen</Text>
    </SafeAreaView>
  )
}

export default LoginScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

HomeScreen.js可按同样方式修改。

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