Question

我想问一下native native如何处理或做响应式字体。例如在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};

节省你做一些ifs的时间。您可以在my blog post上详细了解相关信息。

<小时/> 编辑：我认为将这些函数提取到他们自己的npm包中可能会有所帮助，我还在包中包含ScaledSheet，这是StyleSheet的自动缩放版本。你可以在这里找到它：react-native-size-matters。

Answer 3

由于响应单元暂时不具备反应原则，我认为最好的办法是检测屏幕大小，然后使用它来推断设备类型并有条件地设置fontSize。

您可以编写如下模块：

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

您只需要查看每个设备的默认宽度和高度。如果在设备更改方向时翻转宽度和高度，您可以使用宽高比代替，或者只计算两个尺寸中较小的一个来计算宽度。

此module或this one可以帮助您查找设备尺寸或设备类型。

Answer 4

看看我写的图书馆：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>

Expanation：

f5始终是您的base-fontsize
pa2为您提供相对于base-fontsize的填充。

Answer 5

我只是使用屏幕尺寸的比例，对我来说效果很好。

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 6

从'react-native'导入{尺寸};

const {width， fontScale } = Dimensions.get（“ window”）;

常量样式= StyleSheet.create（{ fontSize：idleFontSize / fontScale ， }）;

fontScale根据您的设备获得缩放比例。

Answer 7

adjustsFontSizeToFit和numberOfLines为我工作。他们将长电子邮件调整为1行。

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

Answer 8

我设法通过以下方式克服了这个问题。

选择您喜欢的当前视图的字体大小（确保它看起来很适合您使用的当前设备模拟器）。
import { Dimensions } from 'react-native'并定义宽度组件外部如下：let width = Dimensions.get('window').width;
现在使用console.log（width）并将其写下来。如果你看起来很好看例如，大小为15，宽度为360，然后取360和除以15（= 24）。这将是重要的价值将调整到不同的大小。

在样式对象中使用此数字，如下所示：textFontSize: { fontSize = width / 24 },...

现在你有一个响应式fontSize。

Answer 9

我最近遇到了这个问题，最终使用了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 10

我们可以使用flex布局，并使用AdjustsFontSizeToFit = {true}来设置响应字体大小，然后文本会根据容器的大小进行调整。

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

但是在样式中，您还需要放置一个fontsize，然后才可以调整adjustsFontSizeToFit的工作。

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

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,
  }
})

这个想法是根据屏幕的高度获取字体大小，示例计算：

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

如果您希望它取决于您的屏幕宽度，您也可以尝试使用它

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

Answer 13

需要使用这种方式，我已经使用过这种方式，并且工作正常。

本机响应屏幕 npm install react-native-response-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，因为这可以使您根据设备密度更好地设置功能。</ p>

Answer 15

你可以使用这样的东西。

var {height，width} = Dimensions.get（'window'）; var textFontSize = width * 0.03;

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

希望这有助于不安装任何第三方库。

React Native Responsive字体大小

15 个答案: