Question

我是React-Native的新手，并尝试按照初学者的教程开始。我已经按照教程创建了一个“Header”组件并尝试导出并导入它并最终使用它。不幸的是我得到一个错误：未捕获错误：不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数但得到：对象。我遇到了这两个问题：

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
Uncaught Error: Invariant Violation: Element type is invalid: expected a string

但他们都没有帮助我解决我的问题。

这些是我的文件及其内容：

index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('albums', () => App);

App.android.js

// Import section
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';

// create a component
const App = () => (
    <Header />
);

// Render it to the device
AppRegistry.registerComponent('albums', () => App);

header.js

// Import labraries for making a component
import React from 'react';
import { Text } from 'react-native';

// Make a component
const Header = () => {
    return <Text>Albums</Text>
};

// Make the component available to other parts of the app
export default Header;

我也试图像这样导入标题（但它没有帮助）：

import { Header } from './src/components/header';

我真的很感激有任何帮助来解决这个问题。在此先感谢：）

P.S 我正在使用React-Native版本0.49.1

Answer 1

所以我想通了，问题是我注册了App两次：

AppRegistry.registerComponent('albums', () => App);

一次进入index.js，第二次进入App.android.js。我通过从index.js中删除了注册来解决错误。

感谢帮助者：）

Answer 2

更改此表单：

import { Header } from './src/components/header';

到：

import  Header  from './src/components/header';

在index.js中更改：

import App from './App';

到

import App from './App.android';

希望这会有所帮助。

未捕获错误：不变违规：元素类型无效：预期字符串或类/函数但得到：object

2 个答案: