web-dev-qa-db-ja.com

修正エラー：ルート 'Home'のコンポーネントはReactコンポーネントでなければなりません

反応ナビゲーションを使用しようとしていますが、各画面のコンポーネントを複数のファイルに移動すると機能しません。 「ルート「ホーム」のコンポーネントはReactコンポーネント」でなければなりません。すべてのコードを1つのファイルに移動した場合、このエラーは発生しません。 m違いがわからない。

これが私のApp.jsです：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';

import { HomeScreen } from './screens/HomeScreen';
import { JoinScreen  from './screens/JoinScreen';
import { HostScreen } from './screens/HostScreen';


const Root = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: JoinScreen,
    }
  }, 
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Root />
    )
  }
}

そして、これが私の.screens/HomeScreen.jsです

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

export default class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  }
});
javascriptreact-nativereact-navigation
9
B Roy Dawson

この行を変更すると、

import { HomeScreen } from './screens/HomeScreen';

に：

import HomeScreen from './screens/HomeScreen';

（つまり、HomeScreenの周りの中かっこを削除します）、それは機能します。 HomeScreenコンポーネントのソースファイルでexport defaultを使用したため、importに destructuring を使用する必要はありません。これは、コンポーネントのHomeScreenと呼ばれる変数にアクセスしようとしています。これは、undefinedに解決され、表示されたエラーの原因になります。

または、defaultをexport defaultから削除し、importを同じに保つことができます。私は個人的にはコードがきれいに見えるので中括弧を削除することを好みます。

また、この行には閉じ括弧がありません。

import { JoinScreen  from './screens/JoinScreen';

しかし、私はそれがタイプミスだったと思いました;）

12
Matt Holland

反応はインポートするものを理解するのに問題があると思います
デフォルトで1つのものをエクスポートするので、置き換える必要があります

'./screens/HomeScreen'から{HomeScreen}をインポートします。
'./screens/HomeScreen'からHomeScreenをインポートします。
1
Haythem Farhat

外部画面ファイルのインポートのために中括弧をそのままにしてください。以下を実行するだけで、AndroidとiOSシミュレータの両方で実行できるはずです）

// HomeScreen.js
... all imports
export class HomeScreen extends React.Component {
...

これにより、両方のプラットフォームで問題が解決しました。

0
Vijay Kumar Kanta

これをjsファイルの一番下に追加し、この行を追加します

export default MainActivity;


import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation-stack';

class MainActivity extends Component{
  ...
}
export default MainActivity;
0
Keshav Gera

クラスをエクスポートしない場合にも発生します。

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}
0
chandresh