【ReactNative開発】プラットフォーム(iOS/Android etc)毎に処理を分岐する方法

こんばんは。この記事では、React Nativeアプリでプラットフォーム毎に、レンダリング等の処理を分岐する方法についてまとめておこうと思います。

ちなみに、今回なんでこんな処理が実装したくなったかと言いますと、以下の記事でまとめたスマホキーボードに”完了”ボタンを配置する際に利用する、<InputAccessoryView>が、iOSでしか使えなかったため。とはいえ、同じコードをAndroid/iOSアプリに利用したかったので、特定のプラットフォームの場合だけ処理を行えるようにする方法がないかと思い、探しておりました。

それでは参ります！

前提

ただし、今回Expo, TypeScriptは特に気にする必要はないかと思います。

• React Native
• Expo
• TypeScript

プラットフォーム毎に処理を分岐する方法

react-nativeの”Platform” APIを利用すれば簡単に実装可能です。

https://reactnative.dev/docs/platform-specific-code

コードは以下のような感じ。

if (Platform.OS === "ios") {
   XXXX
}else{
   YYYY

超簡単でした！

さらに、余談ですがPlatform APIを使うと、プラットフォームのバージョン毎の制御も可能です。以下のような具合です。

if (Platform.Version > 10) {
   XXXX
}else{
   YYYY

ご参考になりましたら幸いです。

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。