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
には単純に文字列が入っていることになるわけです。