React Native报错TypeError: 无法读取undefined的container属性求助

问题现象 #

每次运行React Native脚本时，都会抛出TypeError: Cannot read property 'container' of undefined错误，尝试更换目录、检查代码、重新安装依赖、更新开发环境等操作后问题仍未解决。

核心问题与修复步骤 #

1. 样式文件语法与导出错误 #

原loginStyle.js存在两处致命错误，导致样式变量未正确定义，最终引发loginStyles为undefined：

• 使用无效的const default语法定义样式，应为const loginStyles = StyleSheet.create(...)
• 导出名称与实际变量名不匹配，且未正确定义样式变量

修复后的loginStyle.js：

import { StyleSheet } from 'react-native';

const loginStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: { // 补充原代码缺失的header样式，避免后续报错
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
  },
  logo: {
    width: 120,
    marginBottom: 30,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 20,
    width: '80%',
  },
  loginButton: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  loginButtonText: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default loginStyles;

2. 样式导入方式不匹配 #

原AdminLogin.js使用命名导入import { loginStyles } from './styles/loginStyle.js'，但样式文件为默认导出，需改为默认导入：

import loginStyles from './styles/loginStyle.js';

3. 缺失组件导入 #

AdminLogin.js中使用了TouchableOpacity但未导入，需在react-native导入列表中添加该组件：

import { View, Text, TextInput, Alert, TouchableOpacity } from 'react-native';

修复后的完整AdminLogin.js #

import React, { useState } from 'react';
import { View, Text, TextInput, Alert, TouchableOpacity } from 'react-native';
import loginStyles from './styles/loginStyle.js';

const AdminLogin = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (username.trim() !== '' && password.trim() !== '') {
      onLogin();
    } else {
      Alert.alert('Invalid Credentials', 'Please enter a valid username and password.');
    }
  };

  return (
    <View style={loginStyles.container}>
      <Text style={loginStyles.header}>Admin Login</Text>
      <TextInput
        style={loginStyles.input}
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput
        style={loginStyles.input}
        placeholder="Password"
        secureTextEntry
        onChangeText={(text) => setPassword(text)}
      />
       <TouchableOpacity style={loginStyles.loginButton} onPress={handleLogin}>
        <Text style={loginStyles.loginButtonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
};

export default AdminLogin;

错误详情 #

ERROR  TypeError: Cannot read property 'container' of undefined

This error is located at:
    in AdminLogin (created by AdminDashboard)
    in RCTView (created by View)
    in View (created by AdminDashboard)
    in AdminDashboard
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in eastt(RootComponent), js engine: hermes

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