メインコンテンツへスキップ

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

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

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

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

Platformモジュール​

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

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

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

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

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

tsx
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値を受け入れるため、以下のようにプラットフォーム固有のコンポーネントを返すためにも使用できます。

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

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

<Component />;

Androidバージョンの検出
Android
​

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

tsx
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のメジャーバージョン番号を検出するには、次のようにします。

tsx
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.拡張子が付いていることを検出し、他のコンポーネントから必要とされたときに、関連するプラットフォームファイルをロードします。

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

shell
BigButton.ios.js
BigButton.android.js

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

tsx
import BigButton from './BigButton';

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

ネイティブ固有の拡張機能（NodeJSおよびWebとのコード共有）​

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

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

shell
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拡張子なしでインポートすることもできます。

tsx
import Container from './Container';

プロのヒント: 本番バンドルに未使用のコードが含まれるのを避けるために、Webバンドラーが.native.js拡張子を無視するように設定し、最終的なバンドルサイズを削減してください。