Question

类型错误：未定义不是对象 React-Native

2020-06-11

625

react-native

我尝试在 React-native 中设置视图样式，但一直出现此错误（undefined 不是对象（正在评估“styles.screen”））

我编写了一个简单的代码...

import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text>I am testing</Text>
    </View>
  );
  const styles = StyleSheet.create({
    screen: {
      padding: 50,
    },
  });
}

我花了两个小时尝试修复此问题

Answer 1

这应该可以解决问题：

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text>I am testing</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  screen: {
    padding: 50,
  },
});

您需要将 const 样式对象移出 App() 函数。您拥有它的方式将在初始化样式表之前返回。另一种方法是将其放在 App() 内部的 return() 之前，但将其放在外面更为标准。

Answer 2

因此，经过 3 小时的故障排除和未找到相关信息后，我终于找到了答案。我使用了类模板搜索栏 React Native Search Bar ，并为该搜索栏创建了自定义样式，该样式从文件导出，位于我的“[project]”文件夹中父文件夹“app”中名为“components”的文件夹中。我将类导入到每个屏幕，因为它是一个标题。

以下是 * 不正确 的导入：

import {SearchComponent} from './app/components/searchComponent'

正确的导入是：

import SearchComponent from './app/components/searchComponent'

（因为 SearchComponent 被导出为默认组件，而不是 searchComponent.js 文件中的命名组件。）

默认导出与命名导出的快速参考

正确导入组件后，请确保该组件文件夹中的样式命名正确，并且不要与目标文件中的其他样式共享样式名称；即 name of fileA:styleA != name of fileB:styleA 。

在非常非常仔细地检查您的导出和导入，并且以相同的细节检查您的样式名称之后，它起作用了 - 而且它也应该对您有效。