反応したネイティブアプリに単一エントリファイルを使用

Question

ReactネイティブアプリでアンドロイドとiOSのエントリファイルを1つ使用しようとしています。

私はいくつかのチュートリアルに従っていると、次になってしまっています

index.js

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

export default class Main extends Component { 
    render() { 
     return (
     <Text>Hello world! from both IOS and Android</Text> 
    ); 
    } 
} 

index.ios.js

import React from 'react'; 
import { AppRegistry } from 'react-native'; 
import {Main} from './index'; 


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

私は次で終わりますエラー：

Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

importステートメントで中括弧をMainから削除すると、 '... but got：object'と表示されるので、エクスポート/インポートで何かするように感じられますが、何も動作しないようです。どんな助けもありがとう。

Answer 1

あなたのようにあなたのMain部品を輸出している：あなたはデフォルトのエクスポートを使用している場合は、

import Main from './index'; 

：default exportのようにインポートする必要が

import {Main} from './index'; 

：

export default class Main extends Component { 

けどとしてインポートこのようにインポートする必要があります。これでうまくいかなければ、コードに別の問題があるはずです。

Answer 2

Reactネイティブは、プラットフォームに基づいてインポートしようとします。たとえば、同じフォルダにindex.ios.jsとindex.android.jsがある場合、React Nativeはios用にバンドルされている場合にのみindex.ios.jsをバンドルします。 ./indexからインポートすると、React Nativeは、ios用にバンドルされているため、index.jsの代わりにindex.ios.jsのパスをリボケーションする可能性があります。

好奇心が強い場合は、console.logにインポートしたモジュールのコンテンツを試してみてください。 console.log(Main)実際にインポートされているものを確認します。