React Native 響應式字體大小

Question

我想問一下如何反應原生句柄或做響應式字體。 例如在 iphone 4s 我有 fontSize: 14，而在 iphone 6 我有 fontSize: 18。

Answer 1

您可以使用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),
  },
};

Answer 2

我們使用我們編寫的簡單、直接、可擴展的 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};

為您節省一些時間做許多如果。 您可以在我的博客文章中閱讀更多相關信息。

---

編輯：我認為將這些函數提取到他們自己的 npm 包中可能會有所幫助，我還在包中包含了ScaledSheet ，它是StyleSheet的自動縮放版本。 你可以在這里找到它： react-native-size-matters 。

Answer 3

adjustsFontSizeToFit和numberOfLines對我有用。 他們將長電子郵件調整為 1 行。

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

Answer 4

因為響應式單元目前在 react-native 中不可用，我想說你最好的選擇是檢測屏幕尺寸，然后使用它來推斷設備類型並有條件地設置 fontSize。

您可以編寫如下模塊：

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

您只需要查看每個設備的默認寬度和高度。 如果在設備改變方向時寬度和高度被翻轉，您可能可以使用縱橫比，或者只計算兩個維度中較小的一個來計算寬度。

此模塊或此模塊可以幫助您查找設備尺寸或設備類型。

Answer 5

我通過執行以下操作設法克服了這個問題。

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。

Answer 6

看看我寫的庫： https ://github.com/tachyons-css/react-native-style-tachyons

它允許您在啟動時指定 root-fontSize ( rem )，您可以根據PixelRatio或其他設備特性進行設置。

然后你得到相對於你的rem的樣式，不僅是 fontSize，還有 paddings 等：

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

擴展：

• f5始終是您的基本字體大小
• pa2為您提供相對於基本字體大小的填充。

Answer 7

import { Dimensions } from 'react-native';

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

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

fontScale根據您的設備獲取比例。

Answer 8

我只是使用屏幕尺寸的比例，這對我來說很好。

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}

Answer 9

我們可以使用 flex 布局並使用 adjustsFontSizeToFit={true} 來獲得響應式字體大小。並且文本會根據容器的大小進行調整。

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

但是在樣式中，您還需要放置一個字體大小，然后adjustsFontSizeToFit 才會起作用。

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

Answer 10

我最近遇到了這個問題並最終使用了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
});

Answer 11

為什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */); , 它與 Android 中的pd單位相同。

Answer 12

我通常使用這個：

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

var heightY = Dimensions.get("window").height;

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>fontSize {heightY * 0.014}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    fontSize: heightY * 0.014,
  }
})

這個想法是根據屏幕的高度獲取fontSize 。 示例計算：

// Height 785,.. -> fontSize = 11 
// Height 1000 -> fontSize = 14
// Height 1285,.. -> fontSize = 18

如果您希望它取決於您的屏幕寬度，您也可以嘗試使用它：

var widthX = Dimensions.get("window").width;

Answer 13

需要用這種方式我用過這個，效果很好。

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%")

它適用於所有設備

Answer 14

一種稍微不同的方法對我有用：-

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
};

請參考Pixel Ratio ，因為這可以讓您更好地根據設備密度設置功能。

Answer 15

你可以使用這樣的東西。

var {height, width} = Dimensions.get('window'); var textFontSize = 寬度 * 0.03;

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

希望這有助於不安裝任何第三方庫。