PIYO - Tech & Life -

React NativeのPlatform.selectについて

ReactNative

react-native initが生成するコードの↓の部分にある、Platform.selectを知らなかったので調べてみました。いやー、いっつもさっさと削除しちゃってちゃんと見てなかったです。

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

ちなみに使い方はこう。

<Text style={styles.instructions}>
  {instructions}
</Text>

単に置くだけ。

ドキュメント によると、

There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.

ということで環境に応じて値を切り替えるときに使えるわけですねー。いやー、いつもifとか三項演算子とかで書いてたー。↓みたいな感じで。

const apiKey = Platform.OS === 'ios' ? 'key-for-ios' : 'key-for-android';

で、この手のコードって読みづらくなるんですよねー。今後はPlatform.selectで書くのがよさそうだなと思いました。

selectの仕組み

このselect、どういう仕組みかを簡単に説明します。

そもそもimport { Platform } from 'react-native' した時点で、iosなりandroidなりのコードが読まれています。これはReact Nativeの仕組みで環境ごとに別のコードを読み込みわける仕組みによって実現されています。なので、iOSではimportした時点でこのPlatformはiOS用のPlatformなんですよね。

では、これのselect関数を見てみましょう。

const Platform = {
  select: (obj: Object) => 'ios' in obj ? obj.ios : obj.default,
}

selectに渡されたオブジェクトにiosというキーがあればその値を、なければdefaultキーのものを返す、という実装になっています。

従って、最初のコードではinstructionsには単純に文字列が入っていることになるわけです。