クロスプラットフォームアプリケーションのReact Nativeで（index.ios.js、index.android.js）の代わりにindex.jsを使用するにはどうすればいいですか？今から答えを

Question

おかげで、

私はで初心者ですが、ネイティブ反応し、私は、クロスプラットフォームのアプリを作りたいので、私はindex.jsを作成しました：

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

class ReactApp extends Component { 

    render() { 
     return (
      <View><Text>Hello world</Text></View> 
     ); 
    } 
} 

module.exports = ReactApp; 

その後、私は、インデックスをインポートこのように、両方のindex.ios.jsとindex.android.jsからの.js：

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

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

私はこの後、それが動作するはずだと思うけど、私はこの エラーが発生します。

Answer 1

v0.49に反応した後、あなたドンindex.ios.jsとindex.android.jsが必要です。あなただけindex.jsが必要になります。

import {AppRegistry} from 'react-native'; 
import App from './app/App'; 

AppRegistry.registerComponent('appMobile',() => App); 

（アプリの名前とappMobileを置き換え）

出典：（https://github.com/facebook/react-native/releases/tag/v0.49.0）

New projects have a single entry-point (index.js) from now on

Answer 2

あなたはこれを後ろ向きにしています。 index.ios.jsとindex.android.jsは、デフォルトのreact-native initプロジェクトでは常に別のエントリポイントになります。同じコードベースをindex.jsで実行する場合は、index.ios.jsとindex.android.jsをインポートしてindex.jsをインポートし、index.jsで定義されているのと同じ基本コンポーネントを登録する必要があります。

たとえば、あなたはこれがexample ToDo app（Github repo here）でどのように行われたかを見ることができます。

ルートフォルダにindex.jsを置くと、直接参照しないとindex.android.jsとindex.ios.jsと競合します。したがって、インポートの正確なパスを指す必要があります。以下のコードを参照してください。

index.ios.jsとindex.android.js（同じ内容）

import React from 'react'; 
import { AppRegistry } from 'react-native' 
import ReactApp from './index.js' 
// Had you placed index.js in another folder like `./app`, you could instead do your import with this shorthand: 
// import ReactApp from './app' 

AppRegistry.registerComponent('ReactApp',() => ReactApp) 

index.js

// Note: I noticed that you imported Component from the wrong place. That might also be contributing to your issue so I fixed it here. 
import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
} from 'react-native'; 

// Unless you are exporting multiple things from a single file, you should just use this. 
// It's more idiomatic than using module.exports = ReactApp; 
export default class ReactApp extends Component { 
    render() { 
     return (
      <View><Text>Hello world</Text></View> 
     ); 
    } 
}