ios 反应原生响应字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33628677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native Responsive Font Size
提问by Sydney Loteria
I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18.
我想问一下如何反应原生句柄或做响应式字体。例如，在 iphone 4s 中，我的字体大小为：14，而在 iphone 6 中，我的字体大小为：18。
回答by chinloong
You can use PixelRatio
您可以使用PixelRatio
for example:
例如：
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
}
});
Edit:
编辑：
Another example:
另一个例子：
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
}
}
Usage:
用法：
fontSize: normalize(24)
you can go one step further by allowing sizes to be used on every <Text />components by pre-defined sized.
您可以通过允许<Text />按预定义大小在每个组件上使用大小来更进一步。
Example:
例子：
const styles = {
mini: {
fontSize: normalize(12),
},
small: {
fontSize: normalize(15),
},
medium: {
fontSize: normalize(17),
},
large: {
fontSize: normalize(20),
},
xlarge: {
fontSize: normalize(24),
},
};
回答by nirsky
We use a simple, straight-forward, scaling utils functions we wrote:
我们使用我们编写的简单、直接、可扩展的 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};
Saves you some time doing many ifs. You can read more about it on my blog post.
为您节省一些时间做很多 ifs。您可以在我的博客文章中阅读更多相关信息。
编辑：我认为将这些函数提取到他们自己的 npm 包中可能会有所帮助，我也包含
ScaledSheetScaledSheet在包中，它是StyleSheetStyleSheet. 你可以在这里找到它：react-native-size-mattersreact-native-size-matters。回答by Isaac Madwed
Because responsive units aren't available in react-native at the moment, I would say your best bet would be to detect the screen size and then use that to infer the device type and set the fontSize conditionally.
由于响应式单元目前在 react-native 中不可用，我认为最好的办法是检测屏幕大小，然后使用它来推断设备类型并有条件地设置 fontSize。
You could write a module like:
你可以编写一个模块，如：
function fontSizer (screenWidth) {
if(screenWidth > 400){
return 18;
}else if(screenWidth > 250){
return 14;
}else {
return 12;
}
}
You'll just need to look up what the default width and height are for each device. If width and height are flipped when the device changes orientation you might be able to use aspect ratio instead or just figure out the lesser of the two dimensions to figure out width.
您只需要查看每个设备的默认宽度和高度。如果在设备改变方向时翻转了宽度和高度，您可能可以使用纵横比，或者只是找出两个维度中较小的一个来计算宽度。
This moduleor this onecan help you find device dimensions or device type.
回答by Fabian Zeindl
Take a look at the library I wrote: https://github.com/tachyons-css/react-native-style-tachyons
看看我写的库：https: //github.com/tachyons-css/react-native-style-tachyons
It allows you to specify a root-fontSize (rem) upon start, which you can make dependent of your PixelRatioor other device-characteristics.
它允许您rem在启动时指定 root-fontSize ( )，您可以根据您的PixelRatio或其他设备特性来设置它。
Then you get styles relative to your rem, not only fontSize, but paddings etc. as well:
然后你会得到相对于你的样式rem，不仅是 fontSize，还有 paddings 等等：
<Text style={[s.f5, s.pa2, s.tc]}>
Something
</Text>
Expanation:
说明：
f5is always your base-fontsizepa2gives you padding relative to your base-fontsize.
f5始终是您的基本字体大小pa2为您提供相对于基本字体大小的填充。
回答by shentaoy
I simply use the ratio of the screen size, which works fine for me.
我只是使用屏幕尺寸的比例，这对我来说很好用。
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));
Test
测试
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}
回答by Gundam Meister
adjustsFontSizeToFitand numberOfLinesworks for me. They adjust long email into 1 line.
adjustsFontSizeToFit并numberOfLines为我工作。他们将长电子邮件调整为 1 行。
<View>
<Text
numberOfLines={1}
adjustsFontSizeToFit
style={{textAlign:'center',fontSize:30}}
>
{this.props.email}
</Text>
</View>
回答by Ahmed Kamal
Why not using PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, it's just the same as pdunits in Android.
为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);，它与pdAndroid中的单位相同。
回答by Walter Monecke
I managed to overcome this by doing the following.
我通过执行以下操作设法克服了这个问题。
Pick the font size you like for the current view you have (Make sure it looks good for the current device you are using in the simulator).
import { Dimensions } from 'react-native'and define the width outside of the component like so:let width = Dimensions.get('window').width;Now console.log(width) and write it down. If your good looking font size is 15 and your width is 360 for example, then take 360 and divide by 15 ( = 24). This is going to be the important value that is going to adjust to different sizes.
Use this number in your styles object like so:
textFontSize: { fontSize = width / 24 },...
为您拥有的当前视图选择您喜欢的字体大小（确保它适合您在模拟器中使用的当前设备）。
import { Dimensions } from 'react-native'并定义组件外部的宽度，如下所示：let width = Dimensions.get('window').width;现在 console.log(width) 并写下来。例如，如果您好看的字体大小为 15，宽度为 360，则取 360 并除以 15（= 24）。这将是将调整为不同大小的重要值。
在你的样式对象中使用这个数字，如下所示：
textFontSize: { fontSize = width / 24 },...
Now you have a responsive fontSize.
现在你有了一个响应式 fontSize。
回答by colakollektiv
I recently ran into this problem and ended up using react-native-extended-stylesheet
我最近遇到了这个问题并最终使用了react-native-extended-stylesheet
You can set you remvalue and additional size conditions based on screen size. As per the docs:
您可以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
});
回答by Paras Korat
import { Dimensions } from 'react-native';
const { width, **fontScale** } = Dimensions.get("window");
const styles = StyleSheet.create({
fontSize: idleFontSize / **fontScale**,
});
fontScale get scale as per your device.
fontScale 根据您的设备获取比例。
