React Native でプラットフォーム毎の処理を書く

React Native はマルチプラットフォーム対応だが、完全に共通のコードで Android, iOS 両方に対応するのは難しいだろう。ある程度 OS 毎の処理を書く必要がある。

React Native では以下の数種類の方法で OS 毎に処理を変更する事ができる。

Platform モジュールで切り分ける

Platform モジュールを利用する事で OS 毎の処理を書く事ができる。

import { Platform } from 'react-native';
if (Platform.OS === 'ios') {
	console.log('this is iOS');
}
if (Platform.OS === 'android') {
	console.log('this is Android');
}
var store_url = Platform.select({
	ios: "url for ios", // iOS の URL 形式まだ調べてないので省略
	android: "market://details?id=jp.loumo.currencyconverter",
});

Platform.OS は OS 名称が文字列で入っているので === とかで比較して処理を切り分ける事ができる。

一方 Platform.select は OS をキーにしてそれぞれ値を返す事ができる。上記のように OS 毎に値が多少異なるだけの場合には Platform.select のほうがスマートに書ける、気がする。

ファイルを分ける

処理が大幅に異なるのであればファイルをわけたほうが良い事もある。その場合は以下のように OS 名をファイルに含む事で実行するプラットフォーム毎に自動的に該当するものをロードするようになる。

• index.android.js
• index.os.js

こんな感じで .js 拡張子の前に OS 名を書く。こうすると Android では index.android.js が、 iOS では index.os.js が読み込まれる。

参考 URL

公式のドキュメントを参考にした。

http://facebook.github.io/react-native/releases/0.46/docs/platform-specific-code.html