TypeError：无法读取未定义的属性“容器”答案

【问题标题】：TypeError: Cannot read property 'container' of undefinedTypeError：无法读取未定义的属性“容器”
【发布时间】：2021-03-14 10:42:47
【问题描述】：

我正在尝试在我的项目中添加一个全局样式表，因为它在不同的页面上具有相同的内容。所以，为了改善我的工作，我想做这件事。这是我的全局样式表代码

import  {StyleSheet} from 'react-native';

export const globalStyles = StyleSheet.create({
    container: {
        padding: 24,
        flex: 1,
        backgroundColor: '#fbb1'
    },
    titleText:{
        fontFamily: 'Nunito-Black',
        fontSize: 20,
        color: '#333'
    },
    paragraph:{
        marginVertical: 8,
        lineHeight: 20
    }
})

在那之前一切都很好。但是每当我尝试运行它时，它都会给我以下错误。

TypeError: Cannot read property 'container' of undefined

       5 | export default function Home() {
       6 |     return (
    >  7 |         < View style = { globalStyles.container }>
         |                                       ^
       8 |         <Text style= {globalStyles.titleText}> This is Home Screen </Text>
       9 |     </View >
      10 |     )

      at Home (screens/home.js:7:39)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)

这是我的主屏幕代码：

import React from 'react';
import { Text, View, Image } from 'react-native';
import{globalStyles } from '../styles/global';

export default function Home() {
    return (
        < View style = {globalStyles.container}>
        <Text style= {globalStyles.titleText}> This is Home Screen </Text>
    </View >
    
    )
}

请告诉我我做错了什么。因为我是初学者。我已经尝试了一些方法，但它们都不起作用

【问题讨论】：

标签： javascript react-native global stylesheet

【解决方案1】：

尝试使用默认导出

export default StyleSheet.create({
container: {
    padding: 24,
    flex: 1,
    backgroundColor: '#fbb1'
},
titleText:{
    fontFamily: 'Nunito-Black',
    fontSize: 20,
    color: '#333'
},
paragraph:{
    marginVertical: 8,
    lineHeight: 20
}})

在组件中

import customStyle from '../styles/global';

【讨论】：

这里的customStyle是什么？
没有什么只是访问样式的变量，您可以将其命名为任何您想要的名称，因为我们将文件导出为默认值。

【解决方案2】：

所以，他在这里告诉你的是他没有看到你的 globalStyles。检查是否导入错误。

【讨论】：

好的，尝试将 globalStyles 添加到变量和 console.log 中，这样您就可以检查它有什么属性，然后发布 printscreen。