storeでも公開するために作業中です。クロスプラットフォーム開発が可能なReactNativeですが、いくつかAndroidと同じプログラムでは旨くいかない箇所がありました。Androidではアプリを公開していますが、iOSでの開発を進めていくなかで気づく点がありました。忘れないようにこの記事にメモしておきます。随時増えていくと思いますので、ドンドン追記していきます。iOS関連の記述を追加するapp.jsonにiOSの記述を追加する必要があります。https://docs.expo.io/versions/v34.0.0/workflow/configuration/重要なのは「bundleIdentifier」の項目でしょうか。storeで管理するIDのようなものです。androidのpackageと同じと考えていいと思います。},アイコンは1024iOS用のアイコンを用意する必要があります。調べた所、サイズは1024×1024で、角丸にしてはいけない、その他appleが提示する使用に従う必要があります。上記のようにapp.jsonで専用のものを指定する必要があります。ビルド時にはこのアイコンをリサイズしてさまざまな画像を用意してくれるそうです。アイコン?にもこの画像が利用されました。borderRadiusが効かない場合borderRadius属性が聞いていないものがたまにありました。条件は確実なものはわからなかったのですが、borderがあるか・重なっている背景、などが影響しているようです。以下に参考となる情報がありました。https://facebook.github.io/react-native/docs/view-style-props#borderradius結論、iOSの場合はoverflow:'hidden'を付けることで解決できます。elevetionはiOSでは利用不可ドキュメントにも書かれていましたし、サンプルのアプリでも対応されていたのですでに知っていたのですが、styleの「elevetion」属性はAndroidでしか効きません。iOSで実装する場合は以下のように「Platform」を利用して出し分ける必要があります。必要であればこれに加えて、「zIndex」を使うことになると思います。},}),ReactNavigationのStackNavigatorのヘッダースタイルに差異があるStackNavigatorで設置されるヘッダーのスタイルに以下2点の差異を見つけました。header領域に枠線があるheader領域とscreen領域の間に枠線がでます。Androidではデフォルトでelevetionが効いてました。その代替としてborderが有効になっているのではないかと思います。不要であればStyleで消すことができます。headerTitleStyleに枠線が表示されないheader内のタイトル文字の装飾として下線を表示したかったのですが、iOSでは出来ませんでした。「headerTitleStyle」で下線を指定すればAndroidでは表示されていたのですが、iOSでは表示されませんでした。解決方法もまだわかっていません。StatusBar.currentHeightはiOSでは利用不可keybordAvoidingViewの動作確認時に発見しました。以下の記述をしていたため、iOSではエラーが発生しました。StatusBar.currentHeight}StatusBar.currentHeightはAndroidのみで利用できます。ドキュメントにもありました。bar.iOSではステータスバーの部分はアプリの領域に含まれていない様子なので、意識しなくとも問題ないようです。KeyboardAvoidingViewに関しては、OSごとに出し分ける修正を行うことで解決しました。})}/>おわりに基本的にはそのまま動作しますが、細かいところでOSの差がでるようです。いえReactNativeは十分にクロスプラットフォーム開発と言えるくらいの精度ですので、とても助かります。1人で両方のアプリが一度に構築できるというのはとても便利です。storeにも、いくつもフローの違いがあるようでした。躓いた所はメモしておこうと思っています。editerマークダウン特化エディタアプリマークダウンのプレビュー・よく使う記号を入力するボタンが利用できます。野々市市コミュニティバスのっティ時刻表アプリルートとバス停を選択して時刻表が確認できます石川県野々市市に住むフリーランスエンジニア。応用情報とDBスペシャリストの資格を保有。Webシステムの構築、スマホアプリ、プログラミングメンターなどの依頼に対応できます。