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 -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 -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 -01-11T01:28:34Z
6 votes
看看我写的图书馆：[/tachyons-css/react-native-style-tachyons]
它允许您在启动时指定root-fontSize(pa2)，可以将其作为PixelRatio或其他设备特性的依赖。
然后，您将获得相对于pa2的样式，不仅是fontSize，而且还有填充等。
Something
说明：
pa2始终是您的基本字体大小
pa2提供了相对于基本字体大小的填充。
Fabian Zeindl answered -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 -01-11T01:29:40Z
4 votes
adjustsFontSizeToFit和numberOfLines为我工作。 他们将长电子邮件调整为1行。
numberOfLines={1}
adjustsFontSizeToFit
style={{textAlign:'center',fontSize:30}}
>
{this.props.email}
Gundam Meister answered -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 -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 -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 -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 -01-11T01:32:04Z
1 votes
为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);，它与Android中的pd单位相同。
Ahmed M.Kamal answered -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 -01-11T01:32:53Z
