ReactNativeレスポンシブフォントサイズ

ネイティブハンドルにどのように反応するか、またはレスポンシブフォントをどのように実行するかを尋ねたいと思います。たとえば、iphone 4sではfontSize：14ですが、iphone6ではfontSize：18です。

PixelRatioを使用できます

例えば：

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

編集：

もう一つの例：

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

使用法：

fontSize: normalize(24)

<Text />事前定義されたサイズですべてのコンポーネントでサイズを使用できるようにすることで、さらに一歩進むことができます。

例：

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
};

私たちは、私たちが書いたシンプルでわかりやすいスケーリングutils関数を使用します。

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

多くのifを実行する時間を節約できます。あなたは私のブログ投稿でそれについてもっと読むことができます。

現時点ではレスポンシブユニットはreact-nativeで利用できないため、画面サイズを検出し、それを使用してデバイスタイプを推測し、fontSizeを条件付きで設定するのが最善の策だと思います。

次のようなモジュールを作成できます。

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

各デバイスのデフォルトの幅と高さを調べる必要があります。デバイスの向きが変わったときに幅と高さが反転している場合は、代わりにアスペクト比を使用するか、2つの次元のうち小さい方を計算して幅を計算できる場合があります。

このモジュールまたはこのいずれかを使用すると、デバイスの寸法やデバイスの種類を見つけることができます。

私が書いたライブラリを見てください：https：//github.com/tachyons-css/react-native-style-tachyons

rem起動時にroot-fontSize（）を指定できます。これは、自分PixelRatioまたは他のデバイスの特性に依存させることができます。

次にrem、fontSizeだけでなく、パディングなどに関連するスタイルを取得します。

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

拡張：

• f5常にベースフォントサイズです
• pa2 base-fontsizeに関連するパディングを提供します。

画面サイズの比率を使用するだけで、問題なく機能します。

const { width, height } = Dimensions.get('window');

// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;

const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);

export const scaledSize =
    (size) => Math.ceil((size * scale));

テスト

const size = {
    small: scaledSize(25),
    oneThird: scaledSize(125),
    fullScreen: scaledSize(375),
};

console.log(size);

// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}

私は次のことを行うことでこれを克服することができました。

1. 現在のビューに適したフォントサイズを選択します（シミュレータで使用している現在のデバイスに適していることを確認してください）。

2. import { Dimensions } from 'react-native' 次のように、コンポーネントの外側の幅を定義します。 let width = Dimensions.get('window').width;

3. ここでconsole.log（width）を書き留めます。たとえば、見栄えの良いフォントサイズが15で、幅が360の場合、360を取り、15で割ります（= 24）。これは、さまざまなサイズに調整する重要な値になります。

   次のように、スタイルオブジェクトでこの番号を使用します。 textFontSize: { fontSize = width / 24 },...

これで、レスポンシブfontSizeができました。

adjustsFontSizeToFitそしてnumberOfLines私のために働きます。彼らは長いメールを1行に調整します。

<View>
  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
    style={{textAlign:'center',fontSize:30}}
  >
    {this.props.email}
  </Text>
</View>

フレックスレイアウトを使用し、レスポンシブフォントサイズにadjustsFontSizeToFit = {true}を使用できます。テキストは、コンテナのサイズに応じて調整されます。

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

ただし、スタイルでは、フォントサイズも入力する必要があります。そうすると、adjustsFontSizeToFitが機能します。

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},

私は最近この問題に遭遇し、react-native-extended-stylesheetを使用することになりました

rem画面サイズに基づいて、値と追加のサイズ条件を設定できます。ドキュメントによると：

// component
const styles = EStyleSheet.create({
  text: {
    fontSize: '1.5rem',
    marginHorizontal: '2rem'
  }
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
  $rem: width > 340 ? 18 : 16
});

使ってみませんか、AndroidのユニットPixelRatio.getPixelSizeForLayoutSize(/* size in dp */);と同じpdです。

import { Dimensions } from 'react-native';

const { width, fontScale } = Dimensions.get("window");

const styles = StyleSheet.create({
    fontSize: idleFontSize / fontScale,
});

fontScaleデバイスごとにスケールを取得します。

この方法で使用する必要があります。これを使用しましたが、正常に機能しています。

react-native-responsive-screen npm install react-native-responsive-screen --save

私が1080x1920のデバイスを持っているように

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

すべてのデバイスで機能しています

少し異なるアプローチが私のために働いた：-

const normalize = (size: number): number => {
  const scale = screenWidth / 320;
  const newSize = size * scale;
  let calculatedSize = Math.round(PixelRatio.roundToNearestPixel(newSize))

  if (PixelRatio.get() < 3)
    return calculatedSize - 0.5
  return calculatedSize
};

デバイスの密度に基づいて機能をより適切に設定できるため、ピクセル比を参照してください。

あなたはこのようなものを使うことができます。

var {高さ、幅} = Dimensions.get（ 'window'）; var textFontSize = width * 0.03;

inputText: {
    color : TEXT_COLOR_PRIMARY,
    width: '80%',
    fontSize: textFontSize
}

これがサードパーティのライブラリをインストールせずに役立つことを願っています。