web-dev-qa-db-ja.com

React-Native Invariant Violation：要素タイプが無効です

IPhone Expoでリアクションネイティブアプリを実行しようとすると、このエラーが赤い背景領域に表示されます。

不変違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：が取得されました。定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。

これは「src/components /」フォルダー内のApp.jsです

import React, { Component } from 'react';
import { View, Text } from 'react-native';


export default class App extends Component {
  render() {
    return (
        <View>
                <Text>Hello</Text>
        </View>
    );
  }
}

これは、react-nativeアプリフォルダーのメインApp.jsです。

import App from './src/components/App';

このコードの実行にはexpoアプリを使用しました。このエラーを解決するにはどうすればよいですか？

javascriptandroidiosreactjsreact-native
18
Thimeth Karanayaka

Expoは、/App.jsからコンポーネントをエクスポートすることを期待しています。ただし、現在は/App.jsにのみインポートしています。 Expoはレンダリングするコンポーネントを受け取りません。インポートしたコンポーネントを次のようにエクスポートする必要があります。

export default App;

注意：必要な場合にのみクラスコンポーネントを使用します。

11
THpubs

私の場合、次のようにエクスポートする代わりに：

export default App;

...次のようにエクスポートしました：

export {LoginForm};

それは完全にうまくいきました。

4
Masood

デフォルトのエクスポートを指定せずに次のスタイルでエクスポートを実行すると、このエラーが発生しました。 1つのファイルから複数の小さなコンポーネントをエクスポートしていたため、デフォルトを指定しませんでした。

export const  Modal  = (props) => (
    <div className="someClass">
    </div>        
  )

Importステートメントに角かっこを追加することで、機能させることができました。

import {Modal} from '../components/Modal.js'
2
Greggory Wiley

私は同じ問題があり、App.jsでexport defaultの前にclass yourclassname extends Componentを置いた

1
Navid Abdolalizade