【ReactNative】フォントサイズや要素サイズを端末によって変動させる

前提条件

• react-nativeプロジェクトを作成済み

インストール

使用するのはreact-native-size-mattersというライブラリです。

• GitHub

その名の通り、sizeに関わる値を端末サイズによって変換してくれます。

yarn add react-native-size-matters

使用方法

主な使用方法はscaleとverticalScaleとmoderateScaleという3種類のメソッドを使います。

import { View, Text } from 'react-native';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

// ...略

render() {
  return(
    <View style={{width : scale(20), height: verticalScale(20)}}>
      <Text style={{fontSize : moderateScale(16)}}>hoge</Text>
    </View>
  )
}

それぞれ350 x 650というスクリーンサイズを基準として、現在のスクリーンサイズに適した値を返してくれます。 scaleが基準となり、verticalScaleはその高さバージョンです。 moderateScaleはscaleを拡張したような関数で、デフォルトではscaleの算出結果の0.5倍の値になりますが、第二引数で係数を指定できます。 これにより、部分的により小さくしたい/大きくしたいという場合に利用できます。

scale(10); // -> この値が20となるスクリーンの場合
moderateScale(10); // -> この値は15になる(デフォルト係数が0.5)
moderateScale(10, 0.1); // -> 11になる(係数を0.1にしたため)

まとめ

今回はreact-nativeアプリのサイズ調整に役立つライブラリreact-native-size-mattersを紹介しました。 端末に関わるレイアウト崩れはアプリ開発の終盤で対応することになることが多いので、早い段階から導入することでその辺りの手間を省けるように思います。

SNSでシェアする

タグ

• react-native
• javascript
• react-native-size-matters
• サイズ
• ios
• android
• 端末
• レイアウト
• デザイン