web-dev-qa-db-ja.com

Reactネイティブエラー：要素タイプが無効です：文字列またはクラス/関数が必要ですが、取得されました：オブジェクト

このエラーが発生し、これを修正するのに多くの問題を抱えています。

ここでやろうとしているのは、3つの異なる画面と、各画面に移動するタブバーがあることです。

ここに私のインデックスがあります：

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

import Nav from './app/components/Nav';
import Screen from './app/Screen';

import Tabs from 'react-native-tabs'

import SwitchView from './SwitchView';

class Proj extends Component {

constructor(props){
    super(props);
}

render(){
    var x = "FeedView";
    return(

          <View style={styles.container}>
            <Tabs selected={x} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}>
                <Text name="FeedView">First</Text>
                <Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="BoardView">Third</Text>
            </Tabs>

            <SwitchView id={x}/>

          </View>
    );
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})

AppRegistry.registerComponent('Proj', () => Proj);

ここに私のSwitchViewがあります：

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';

class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}
javascriptandroidreactjsreact-native
27
Parkicism

これはおそらく、プログラム内のいくつかのJSモジュールのエクスポート/インポートの問題が原因です。通常、以下にリストする2つの理由のいずれかが原因です。

  • エクスポートするのを忘れるか、何かを誤ってエクスポートする
  • 存在しないものをインポートするか、誤ってインポートする

私は同様のエラーに遭遇しましたが、私の場合、exportではなくimportが原因であり、importステートメントを誤って使用して何かをインポートしましたモジュールに存在します。

私の場合、importは次のように誤って記述されていました。

import { MyComponent } from './MyComponents/MyComponent'

実際には次のようになります：

import MyComponent from './MyComponents/MyComponent'

そして、それは私を夢中にさせて、それを理解するのに丸一日かかりました、そして、これが何人かの人々のために数時間を救うことを望みます。

47
nybon

SwitchView定義を変更します

export default class SwitchView extends Component...

24
Raj R

SwitchViewを次のように変更します。

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
export default class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}
7
tv3free

この問題に直面したのは、インストールされたパッケージのみです。以前私は

import WebView from 'react-native-webview-messaging/WebView';

に変更しました

import { WebView } from 'react-native-webview-messaging/WebView';
3
Sujit

私の花瓶では、リアクティブ0.46.4を使用しており、import MainContainer from './app'のようなものがあり、appディレクトリにはAndroidとiOSの間で共有index.jsファイルがありましたが、 React Nativeはapp内でindex.jsを検出していませんでした。 import MainContainer from './app/index.js'に切り替えると、機能しました。

3
urubuz

Module.exports = SwitchViewとはどう違いますか？

私にとって、module.exportsは、1つを除くすべてのjsファイルで機能します。

0
chibeepatag