web-dev-qa-db-ja.com

Reactネイティブレスポンシブフォントサイズ

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

iosreactjsreact-native
48
Sydney Loteria

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),
  },
};
47
chinloong

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

次のようなモジュールを書くことができます。

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

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

この モジュール または これ は、デバイスの寸法またはタイプを見つけるのに役立ちます。

7
Isaac Madwed

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

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

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

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

拡張：

  • f5は常に基本フォントサイズです
  • pa2は、base-fontsizeに相対的なパディングを提供します。
6
Fabian Zeindl

私は単に画面サイズの比率を使用していますが、これは私にとってはうまくいきます。

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}
4
shentaoy

adjustsFontSizeToFitおよびnumberOfLinesは私のために機能します。長いメールを1行に調整します。

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

import {Dimensions} from 'react-native';

const {width、fontScale} = Dimensions.get（ "window"）;

const styles = StyleSheet.create（{fontSize：idleFontSize/fontScale、}）;

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

2
Paras Korat

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

  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ができました。

1
Walter Monecke

PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);を使用しない理由は、Androidのpdユニットとまったく同じです。

1
Ahmed M.Kamal

私は最近この問題に遭遇し、 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
});
1
colakollektiv

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

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

ただし、スタイルでは、フォントサイズも設定する必要があります。その場合にのみ、フォントサイズが調整されます。

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