そーす

福岡在住のプログラマ。SwiftとかKotlinとかJavascriptとかSketchとか触ってます。

ReactNativeでiOS, Androidに最適化したUIを構成するには

最近は仕事でも個人でもReact Nativeでの開発がメインになっており、かなり知識が溜まってきました。

で、だいぶiOSAndroidに最適化したUIの構成ができるようになってきたのでメモ程度に残します。

OSごとのUIの分け方

ReactNativeは標準で幾つかiOS, Androidの処理を分ける機能があります。

リファレンス貼っときます。

facebook.github.io

ファイルごと分割する

ReactNativeの標準機能でXXX.ios.jsとXXX.android.jsという規則でファイル名を付けて

import XXX from './XXX';
const XXX = require('./XXX');

とするとiOSの時はXXX.ios.jsを、Androidの時はXXX.android.jsを自動でインポートしてくれます。

例えば、エラーをユーザに通知する機能を作るとします。

iOSではUIAlertControllerを使い、AndroidではToastを使うのが一般的だと思います。

その場合、

Alert.ios.jsは

'use strict';

import { AlertIOS } from 'react-native';

module.exports = {
  show: message => AlertIOS.alert(message),
 };

Alert.android.jsは

'use strict';

import { ToastAndroid } from 'react-native';

module.exports = { 
  show: message => ToastAndroid.show(message, ToastAndroid.LONG) 
};

呼び出し

import Alert from './Alert';

Alert.show('hoge');

気をつけることはファイル名とプロパティ名を揃えることです。

スタイルなどの値を分ける

処理自体を分ける場合はファイル分割が良いですが、スタイルを分けたい場合なども頻繁にあります。

そういうときはPlatform APIを使います。

例えばTextInputを使う場合、iOSAndroidではかなりあてるスタイルが異なります。

TextInputはiOSではheightの設定が必要だったり背景色やボーダーが無いとフォームが解りづらいので設定する必要があります。

Androidの方は元から適切なPaddingや高さ、入力フォームがわかるように下線が付いていたりしますので背景色やボーダーを追加する必要はありません。

そのときはPlatform.selectを使って

  height: Platform.select({ ios: 54 }),
  backgroundColor: Platform.select({ ios: '#EEE' }),
  borderColor: Platform.select({ ios: '#DDD' }),
  borderWidth: Platform.select({ ios: 0.5 }),

このようにすることで細かい分け方も可能です。

ios

f:id:saburesan:20170401134649p:plain

android

f:id:saburesan:20170401134746p:plain

特定のOSのみ適用されるプロパティを利用する

標準のコンポーネントのプロパティで特定のOSにしか意味を為さないプロパティがいくつかあります。

facebook.github.io

例えば上のリンクのViewコンポーネントにもいつくかあり

f:id:saburesan:20170401133855p:plain

上記のスクリーンショットのように[iOS][Android]という表記で書かれています。

また、表記が無くともプロパティに設定する値がOSごとに意味を為す/為さないがあるのでリファレンスはしっかり読みましょう。

ネイティブAPI/ネイティブViewの呼び出しで分ける。

標準に無いネイティブのAPIやViewを呼びたい場合などは必然的にXcodeとAndroidStudioを使ってコードを分ける必要がありますが、

この時にReactNative側から呼ぶインターフェースを統一しておけば

OSの違いを意識すること無く呼び出すことが出来ます。

ネイティブ連携はリファレンスを見ながら簡単に導入することが出来ます。

facebook.github.io