index.jsの代わりにindex.ios.jsを持つ利点

Question

初めてネイティブの反応のために新たに反応し、create-react-native-appを使用して最初のアプリの足場を作りました。それは私が推測するApp.jsを作ったのは、ほとんどのアプリのindex.jsと同じで、私のアプリのエントリーポイントとして機能します。

多くのチュートリアルを見ると、別々のファイルindex.ios.jsとindex.android.jsが表示されています。私は、なぜこれらのアプリが各プラットフォーム用に別々のファイルを持っているのか混乱しています。

私はthis questionから、個々のファイルとの両方を使用するハイブリッドアプリもあることがわかります。

これらのさまざまなオプションはすべて私を混乱させるものです。別のファイルを使用する場合と、エントリポイントを1つだけ持つ場合はどんな状況ですか？

Answer 1

これらのすべての異なるオプションが種類の私を混乱させています。別のファイルを使用する場合と、エントリポイントを1つだけ持つ場合はどんな状況ですか？

これまでのところ、別のエントリファイルを用意する必要はありません。index.ios.jsとindex.android.jsです。私が最初にやること、そしてほとんどの人がやっていることは、両方のファイルに次のようなものを追加することです。

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

AppRegistry.registerComponent('YourAppName',() => App) 

また、ならびに単一index.jsファイルと上記のコードに置き換える、それらの両方を削除することができます。私自身も含めてなぜもっと多くの人がそれをしないのかはっきりしない。

プラットフォーム間でロジックを分割する必要があることがわかるまで、このパターンを安全に実行できると思います。あなたがそうしても、エントリーファイル自体からそれを分割することはありそうにないと思います。リーフノードでさらにロジックを分割する必要があります。

platform specific codeと書く必要がある場合は、Platformモジュールを使用してインライン化できます。 '反応ネイティブ' から

import { Platform, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
    height: (Platform.OS === 'ios') ? 200 : 100, 
}); 

またはPlatform.select

インポート{プラットフォーム、スタイルシート}。あなたはまた、適切なコンポーネントを選択するために使用することができます

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    ...Platform.select({ 
     ios: { 
     backgroundColor: 'red', 
     }, 
     android: { 
     backgroundColor: 'blue', 
     }, 
    }), 
    }, 
}); 

...

const Component = Platform.select({ 
    ios:() => require('ComponentIOS'), 
    android:() => require('ComponentAndroid'), 
})(); 

<Component />; 

最後の例は、同様に、ファイルの命名規則を経由して達成することができます。たとえば、あなたは、次の2つのコンポーネントファイル...

|- Component.ios.js 
|- Component.android.js 

し、あなたのファイルにあなただけのようなComponentを必要としている場合...

import Component from './Component'; 

そしてバンドラは、.ios又は.androidビットに基づいて適切なコンポーネントをインポートします。

Answer 2

アイオスとアンドロイドファイルを持っているという考えは、アンドロイドとiOSで違った書き方が必要なコードを扱うためのものです。たとえば、React NativeのPickerコンポーネントは、iOSとAndroidで動作が異なります。コードを分割することにより、コードを簡単に分割して保守することができます。 React Nativeを実行すると、アプリケーションが実行されているプラ​​ットフォームに基づいて自動的に使用するファイルが見つかります。

出典：https://facebook.github.io/react-native/releases/0.26/docs/platform-specific-code.html

Answer 3

一部のコンポーネントは、IOSとAndroidの間で普遍的ではありません。

セットアップの面では、反応するネイティブアプリを作成すると、初心者の方や初心者の方でも簡単に作成できます。より複雑なビューを設定すると、iosとAndroidのビューを別々にする必要があります。

アプリをうまく構成すると、ロジックを1つのファイルに分割してから、ios、Android、さらにはWeb用に別々のビューを作成できます。基本的に3つのプラットフォーム用に1アプリを書く。

Answer 4

index.jsは両方のプラットフォームで動作します。 index.ios.jsはiOS端末でのみ動作し、index.android.jsはAndroid搭載端末でのみ動作します。

両方のデバイスで同じように見えるビューと、両方のプラットフォームで同じように実行された依存関係がある場合は、プラットフォーム指定子をスキップします。

しかし、2つのプラットフォーム（おそらく2つのプラットフォームの異なる設計標準に従う）でビューを少し異なるようにする必要がある場合や、2つのプラットフォームで異なる依存関係を使用する必要がある場合は、指定子。

一部のコンポーネントを単に.jsとし、他のものを.io.jsまたはにすることにより、必要に応じてプラットフォーム固有の選択を可能にしながら可能な限りコードを統合することができます。

プラットフォーム指定子は、インデックスファイルだけでなく、どのコンポーネントでも使用できます。 （つまり、あなたはそれぞれが自動的に適切なプラットフォーム上で使用されます両方のプラットフォームとMyRegularButton.ios.jsとMyRegularButton.android.js`で使用されますMyCoolButton.jsを持つことができます。）

Answer 5

を、あなたがいることを知っているよhttps://github.com/react-community/create-react-native-appこのレポが表示されます場合はcreate-react-native-appはExpo製品です。 Expoサーバー上にコンパイルされたすべてのアプリケーションとそこにあるindex.android.jsとindex.ios.js。

あなたは、プラットフォームのファイルを変更したい場合は、その後

npm run eject 

を実行する必要があり、あなたはすべての依存関係（NPM、cocoapods、反応-ネイティブモジュール）と、生の反応-ネイティブプロジェクトを得るでしょうし、もちろんindex.android.jsとindex.ios.js

Answer 6

Reactネイティブコンポーネントはプラットフォームに移植されるので、index.js内のすべてをビルドして、ほとんどの場合問題ありません。

特定のスタイルがある場合や、プラットフォーム固有の機能しか持たないコンポーネントを使用している場合は、.iosまたは.androidタグを使用してその足場を助けることができます。

単純なものでもReact Nativeガイドでも使用できるプラットフォームモジュールがあります。コードが複雑すぎるとファイルにiosとandroidタグを使用することが記述されています。

https://facebook.github.io/react-native/docs/platform-specific-code.html