反应本机响应字体大小
我想问如何反应本机处理或做响应字体。 例如在iphone 4s我有fontSize：14，而在iphone 6我有fontSize：18。
你可以使用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) { if (Platform.OS === 'ios') { return Math.round(PixelRatio.roundToNearestPixel(size)) } else { return Math.round(PixelRatio.roundToNearestPixel(size)) - 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), }, };
我们使用一个简单的，直接的，缩放的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。 您可以在我的博客文章中阅读更多内容。
编辑：我认为这可能是有用的提取这些function，以自己的npm包，我也包括ScaledSheet包，这是一个自动缩放版本的StyleSheet 。 你可以在这里find它： react-native-size-matters 。
因为响应式单元目前还没有反应本机，所以我认为最好的select是检测屏幕大小，然后使用它来推断设备types并有条件地设置字体大小。
你可以写一个模块，如：
function fontSizer (screenWidth) { if(screenWidth > 400){ return 18; }else if(screenWidth > 250){ return 14; }else { return 12; } }
你只需要查看每个设备的默认宽度和高度。 如果宽度和高度在设备更改方向时翻转，则可以改为使用宽高比，或者只是找出两个维度中较小的一个来计算宽度。
这个模块或这个 模块可以帮助您find设备尺寸或设备types。
看看我写的图书馆： https ： //github.com/tachyons-css/react-native-style-tachyons
它允许您在开始时指定root-fontSize（ rem ），您可以根据您的PixelRatio或其他设备特性进行设置。
然后你得到相对于你rem样式，不仅fontSize，而且填充等等：
<Text style={[s.f5, s.pa2, s.tc]}> Something </Text>
Expanation：
-
f5始终是您的基础字体大小 -
pa2给你填充相对于你的base-fontsize。
我设法通过以下方法来克服这个问题。
-
为当前视图select您喜欢的字体大小（确保它在模拟器中使用的当前设备看起来不错）。
-
import { Dimensions } from 'react-native'并在组件外定义宽度，如下所示：let width = Dimensions.get('window').width; -
现在console.log（宽度）并写下来。 如果你的字体大小是15，而你的宽度是360，那么就用360除以15（= 24）。 这将是要适应不同规模的重要价值。
在你的样式对象中使用这个数字，如下所示：
textFontSize: { fontSize = width / 24 },...
现在你有一个响应的fontSize。