web-dev-qa-db-ja.com

React Androidネイティブのビューに合わせてフォントサイズを調整する方法は？

React Nativeでビュー内のテキストのフォントサイズを自動的に変更するにはどうすればよいですか？

長さの異なるテキストがありますが、その一部はビューに合わないため、フォントサイズを小さくしました。ドキュメントを確認しましたが、 this が見つかりましたが、これはiOS専用であり、Androidでも必要です。

また、ボタンやタッチ可能な不透明度などの他のコンポーネントでも機能しますか？

androidreactjsreact-native
16
Taha

このアプローチを試してください。次のように画面幅に応じてフォントサイズを設定することを検討してください

width: Dimensions.get('window').width

あなたのスタイルでは、フォントサイズが画面に合うようにパーセンテージ計算をしてみてください

style={
  text:{
     fontSize:0.05*width
  }
}

これはすべての画面で機能します（AndroidおよびIOS）

2
ِAllloush

そのための最善の方法は、Textコンポーネントの組み込みの小道具を次のように使用することだと思います。

<Text adjustsFontSizeToFit minimumFontScale={.5}>Hello World</Text>

これらの3つの小道具を一緒に使用して、最良の結果を得ることができます。

adjustsFontSizeToFit
minimumFontScale={.5} // or any other value you prefer between 0 and 1
allowFontScaling

しかし、あなたは[〜＃〜] not [〜＃〜]のように、先ほど言及した小道具を使用するとき、特定のスタイルを使用する必要があります。

fontSize,
height,
width, 
flex,
margin
0
Walter Monecke

解像度ベースのフォントサイズを実装する最良の方法は、ピクセル比を使用することです。このアプローチをアプリ全体に実装しました。ピクセル比は、これを達成するのに役立つものです。ピクセル比が小さいほど解像度が低くなり、ピクセル比が大きいほど解像度が高くなります。

PixelRatio.get（）=== 1 mdpi Androidデバイス（160 dpi）

PixelRatio.get（）=== 1.5 hdpi Androidデバイス（240 dpi）

PixelRatio.get（）=== 2 iPhone 4、4S iPhone 5、5c、5s iPhone 6 xhdpi Androidデバイス（320 dpi）

PixelRatio.get（）=== 3 iPhone 6 plus xxhdpi Androidデバイス（480 dpi）

PixelRatio.get（）=== 3.5 Nexus 6

以下のコードスニペットはスタイルシートであり、JSXコードでクラスを使用できます。

import { StyleSheet, PixelRatio } from 'react-native'
import { Colors } from '../../Themes/'
const FONT_SIZE = 12;
FONT_SIZE_Requests = 12;
if ((PixelRatio.get() <= 1.5) &&(PixelRatio.get() > 1)) {
  FONT_SIZE = 9;
  FONT_SIZE_Requests = 9;
} else if (PixelRatio.get() <=1) {
  FONT_SIZE = 9;
  FONT_SIZE_Requests=9;
} else if ((PixelRatio.get() > 1.5) &&( PixelRatio.get() >= 2) && (PixelRatio.get() < 3)) {
         FONT_SIZE = 10;
         FONT_SIZE_Requests = 10;
       } else if (PixelRatio.get() >= 3) {
         FONT_SIZE = 11;
         FONT_SIZE_Requests = 11;
       }
export default StyleSheet.create({
  header: {
    backgroundColor: Colors.ClayColor
  },
  transparentHeader: {
    backgroundColor: "#ffffff",
    elevation: 0
  },
labelStyle:{
   margin:0,
        fontFamily:'roboto_medium',
        fontSize:FONT_SIZE
},
labelStyleRequests:{
  margin:0,
  fontFamily:'roboto_medium',
  fontSize:FONT_SIZE_Requests
}
})
0
Devansh sadhotra

頭痛なしで、各デバイスのフォントスケールを維持できる小さなライブラリを使用できます。

npm i --save react-native-responsive-fontsize

import RF from "react-native-responsive-fontsize"

fontSize：RF（2）

ただし、allowFontScaling = {false}小道具をテキストに追加することを忘れないでください。 iosには自動fonスケーリング機能があるため、フォントサイズが予想と異なる場合があります。

0
Akash Golui

私のReact Nativeアプリ。既にいくつかのプロパティがあることに気付きました。 iOS向けに実装：adjustsFontSizeToFit minimumFontScale={.4}しかし、Androidには現時点ではそのようなメソッドはありません。

注：私にとっては有効ですが、「最良の」可能性はないかもしれません！

現在、私はネストされた三項演算子を使用しています：

fontSize: this.props.driverName.length > 12 && 
this.props.driverName.length < 20 ? heightPercentageToDP('2%') : 
this.props.driverName.length > 20 && this.props.driverName.length < 40 
? heightPercentageToDP('1.75%') : heightPercentageToDP('2.25%')

素人の用語では、上記の3項は使用される文字の範囲をチェックし、範囲に基づいてビュー内でfontSizeを '％'に変更します。メソッド：heightPercentageToDPは、モバイル画面のDPに基づいてサイズを '％'に変換するために使用している関数です（このように、タブレットまたは携帯電話で応答します）。

heightPercentageToDPコードスニペット：

    import { Dimensions, PixelRatio } from "react-native";
    const widthPercentageToDP = widthPercent => {
    const screenWidth = Dimensions.get("window").width;
    // Convert string input to decimal number
    const elemWidth = parseFloat(widthPercent);
    return PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
    };
    const heightPercentageToDP = heightPercent => {
    const screenHeight = Dimensions.get("window").height;
    // Convert string input to decimal number
    const elemHeight = parseFloat(heightPercent);
    return PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
    };
    export { widthPercentageToDP, heightPercentageToDP };

HeightPercentageToDPのクレジットとソースは次のとおりです。 -change-1c8beba5bc23 。

0
David Hahn