本文へ移動

プラットフォーム固有のコード

クロスプラットフォームアプリを構築する場合、できるだけ多くのコードを再利用したいでしょう。AndroidとiOSで別々の視覚コンポーネントを実装したいなど、コードを異なるものにすることが理にかなうシナリオが発生する可能性があります。

React Nativeは、コードを整理し、プラットフォームごとに分離する2つの方法を提供します。

特定のコンポーネントには、特定のプラットフォームでのみ機能するプロパティがある場合があります。これらのプロパティはすべて@platformでアノテーションされており、ウェブサイトでは横に小さなバッジが表示されます。

Platformモジュール​

React Nativeは、アプリが実行されているプラットフォームを検出するモジュールを提供します。プラットフォーム固有のコードを実装するために、この検出ロジックを使用できます。コンポーネントのごく一部のみがプラットフォーム固有の場合、このオプションを使用してください。

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

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

iOSで実行されている場合、Platform.OSはiosになり、Androidで実行されている場合はandroidになります。

キーが'ios' | 'android' | 'native' | 'default'のいずれかであるオブジェクトを指定して、現在実行中のプラットフォームに最も適した値を返すPlatform.selectメソッドも使用できます。つまり、携帯電話で実行している場合、iosとandroidのキーが優先されます。それらが指定されていない場合は、nativeキーが使用され、次にdefaultキーが使用されます。

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue',
      },
    }),
  },
});

これにより、すべてのプラットフォームでflex: 1を持つコンテナ、iOSでは赤色の背景色、Androidでは緑色の背景色、その他のプラットフォームでは青色の背景色が作成されます。

any値を受け入れるため、以下のようにプラットフォーム固有のコンポーネントを返すためにも使用できます。

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

<Component />;
const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb'),
})();

<Component />;

Androidバージョンの検出
Android
​

Androidでは、Platformモジュールを使用して、アプリが実行されているAndroidプラットフォームのバージョンも検出できます。

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

注記: Versionは、Android OSバージョンではなく、Android APIバージョンに設定されています。対応付けについては、Androidバージョン履歴を参照してください。

iOSバージョンの検出
iOS
​

iOSでは、Versionは-[UIDevice systemVersion]の結果であり、オペレーティングシステムの現在のバージョンを示す文字列です（例：「10.3」）。たとえば、iOSでメジャーバージョン番号を検出するには

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

プラットフォーム固有の拡張子​

プラットフォーム固有のコードがより複雑な場合は、コードを個別のファイルに分割することを検討する必要があります。React Nativeは、ファイルに.ios.または.android.拡張子が付いている場合にそれを検出し、他のコンポーネントから必要に応じて関連するプラットフォームファイルを読み込みます。

たとえば、プロジェクトに次のファイルがあるとします。

BigButton.ios.js
BigButton.android.js

その後、コンポーネントを次のようにインポートできます。

import BigButton from './BigButton';

React Nativeは、実行中のプラットフォームに基づいて適切なファイルを自動的に選択します。

ネイティブ固有の拡張子（つまり、NodeJSおよびWebとのコード共有）​

モジュールをNodeJS/WebとReact Native間で共有する必要があるが、Android/iOSの違いがない場合にも、.native.js拡張子を使用できます。これは、React NativeとReactJSで共有される共通コードを持つプロジェクトに特に役立ちます。

たとえば、プロジェクトに次のファイルがあるとします。

Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

次のように、.native拡張子なしでインポートすることもできます。

import Container from './Container';

プロチップ：未使用のコードが本番バンドルに含まれないように、Webバンドラで.native.js拡張子を無視するように構成して、最終的なバンドルサイズを削減します。