ios-React Native自适应字体大小

我想问一下如何处理本机句柄或做响应字体。 例如，在iPhone 4s中，我的fontSize：14，而在iPhone 6中，我的fontSize：18。

12个解决方案

50 votes

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

您可以通过按预先定义的大小在每个组件上使用大小来进一步迈进。

例：

const styles = {

mini: {

fontSize: normalize(12),

},

small: {

fontSize: normalize(15),

},

medium: {

fontSize: normalize(17),

},

large: {

fontSize: normalize(20),

},

xlarge: {

fontSize: normalize(24),

},

};

chinloong answered 2020-01-11T01:27:31Z

31 votes

我们使用编写的简单，直接，可扩展的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。

nirsky answered 2020-01-11T01:28:01Z

9 votes

因为响应式单元目前在反应式本机中不可用，所以我想说最好的选择是检测屏幕尺寸，然后使用它来推断设备类型并有条件地设置fontSize。

您可以编写类似以下的模块：

function fontSizer (screenWidth) {

if(screenWidth > 400){

return 18;

}else if(screenWidth > 250){

return 14;

}else {

return 12;

}

}

您只需要查找每个设备的默认宽度和高度即可。 如果在设备更改方向时宽度和高度发生了翻转，您可能可以改用宽高比，或者只是找出两个维度中较小的一个以得出宽度。

此模块或该模块可以帮助您找到设备尺寸或设备类型。

Isaac Madwed answered 2020-01-11T01:28:34Z

6 votes

看看我写的图书馆：[https://github.com/tachyons-css/react-native-style-tachyons]

它允许您在启动时指定root-fontSize(pa2)，可以将其作为PixelRatio或其他设备特性的依赖。

然后，您将获得相对于pa2的样式，不仅是fontSize，而且还有填充等。

Something

说明：

pa2始终是您的基本字体大小

pa2提供了相对于基本字体大小的填充。

Fabian Zeindl answered 2020-01-11T01:29:16Z

4 votes

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

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}

shentaoy answered 2020-01-11T01:29:40Z

4 votes

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

numberOfLines={1}

adjustsFontSizeToFit

style={{textAlign:'center',fontSize:30}}

>

{this.props.email}

Gundam Meister answered 2020-01-11T01:30:00Z

2 votes

从'react-native'导入{Dimensions}；

const {width，fontScale} = Dimensions.get(“ window”);

const styles = StyleSheet.create({fontSize：idleFontSize / fontScale，});

fontScale根据您的设备获取比例。

Paras Korat answered 2020-01-11T01:30:33Z

1 votes

通过执行以下操作，我设法克服了这一问题。

为当前视图选择所需的字体大小(确保对于您正在使用的当前设备，它看起来不错模拟器)。

textFontSize: { fontSize = width / 24 },...并定义宽度像这样在组件外部：let width = Dimensions.get('window').width;

现在console.log(width)并写下来。 如果你的字体好看尺寸为15，宽度为360，例如360除以15(= 24)。 这将是重要的价值将调整为不同的大小。

像这样在样式对象中使用此数字：textFontSize: { fontSize = width / 24 },...

现在您有了一个响应式fontSize。

Walter Monecke answered 2020-01-11T01:31:16Z

1 votes

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

});

colakollektiv answered 2020-01-11T01:31:40Z

1 votes

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

adjustsFontSizeToFit

style={styles.valueField}>{value}

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

valueField: {

flex: 3,

fontSize: 48,

marginBottom: 5,

color: '#00A398',

},

Payel Dutta answered 2020-01-11T01:32:04Z

1 votes

为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);，它与Android中的pd单位相同。

Ahmed M.Kamal answered 2020-01-11T01:32:24Z

-2 votes

您可以使用类似这样的东西。

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

inputText: {

color : TEXT_COLOR_PRIMARY,

width: '80%',

fontSize: textFontSize

}

希望这对您有所帮助，而无需安装任何第三方库。

Guna Sekhar answered 2020-01-11T01:32:53Z