【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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。