[解決済み] エラーを修正しました。ルート 'Home' のコンポーネントは、React コンポーネントである必要があります。

質問

react-navigationを使用していますが、各画面のコンポーネントを複数のファイルに移動させるとうまくいきません。 ルート'Home'のコンポーネントはReactコンポーネントでなければならない"というエラーがいつも出ます。このエラーは、すべてのコードを1つのファイルに移動しても発生しないので、何が違うのかよくわかりません。

以下は私の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',
  }
});

解決方法は？

この行を変更すればいいと思います。

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

になります。

import HomeScreen from './screens/HomeScreen';

(の周りの中括弧を削除する）。 HomeScreen であれば、動作するはずです。なぜなら、あなたは export default の中に HomeScreen コンポーネントのソースファイルでは 構造化 を使用します。 import . という変数にアクセスしようとしています。 HomeScreen に解決されます。 undefined というエラーが発生します。

あるいは default から export default を維持し import は同じです。個人的には、中括弧を削除した方がコードがすっきりして良いと思います。

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

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

しかし、私はそれがタイプミスであると仮定しました;)