[英]how to set font size for different IOS devices in react native
In react-native i design a sample,when i check it in different IOS devices here is my code: 在react-native我设计了一个样本,当我在不同的IOS设备中检查它时,这是我的代码:
render() {
return (
<View style={styles.container}>
<View style={styles.body}>
<TouchableHighlight style={styles.facebook} >
<View style={styles.row}>
<Image style={styles.icon} source={require('image!fb')}/>
<Text style={styles.facebookText} >Continue with Facebook</Text>
</View>
</TouchableHighlight>
</View>
</View>
)
}
};
var styles = StyleSheet.create({
container:{
marginTop: 65,
flexDirection:'column',
flex:1,
backgroundColor:'transparent'
},
body:{
flex:.5
},
facebook:{
marginTop: 25,
height: 50,
padding: 10,
marginRight: 40,
marginLeft: 40,
backgroundColor: '#1A8A29',
},
row:{
flexDirection:'row',
},
facebookText:{
marginLeft: 8,
fontSize: 20,
color: 'white',
alignSelf:'center'
},
icon:{
marginTop: 3,
marginLeft: 5,
width: 25,
height: 25
}
})
when i check in iphone-6 and 5s font problem is coming any one help me to solve this problem,how to set the font size for different IOS devices in react-native any help much appriciated 当我检查iphone-6和5s字体问题即将到来时,任何人帮我解决这个问题,如何设置不同IOS设备的字体大小在react-native任何帮助很多appriciated
I've written the following code for my project: 我为我的项目编写了以下代码:
On the file: multiResolution.js
I have:在文件: multiResolution.js
我有:
export function getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){ let devRatio = PixelRatio.get(); let factor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0; let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down // console.log("The factor is: "+factor); if(factor<=1){ return currentFont-float2int(maxFontDifferFactor*0.3); }else if((factor>=1) && (factor<=1.6)){ return currentFont-float2int(maxFontDifferFactor*0.1); }else if((factor>=1.6) && (factor<=2)){ return currentFont; }else if((factor>=2) && (factor<=3)){ return currentFont+float2int(maxFontDifferFactor*0.65); }else if (factor>=3){ return currentFont+float2int(maxFontDifferFactor); } } function float2int (value) { return value | 0; }
Then on each react-native component I do: 然后在每个反应原生组件上我做:
import { PixelRatio } from 'react-native'; import {getCorrectFontSizeForScreen} from './multiResolution' import Dimensions from 'Dimensions'; const {height:h, width:w} = Dimensions.get('window'); // Screen dimensions in current orientation
and then on my styles
I do:然后我的 styles
我做:
var portraitStyles = StyleSheet.create({ titleText: { fontSize: getCorrectFontSizeForScreen(PixelRatio, w,h,27),//magic takes place here }, });
It's custom but it has worked very well for me. 这是习惯,但它对我来说非常好。
Also (irrelevant to your question but I'm going to say it anyway), I use widths and heights relevant to the screenWidth and screenHeight like so: 另外(与你的问题无关,但无论如何我都要说),我使用与screenWidth和screenHeight相关的宽度和高度,如下所示:
aStyleForAnElement:{ //this element will occupy width: w*0.55, //55% of the screen width height:h*0.05 //5% of the screen height }
This is how I support different screen sizes in my project till now. 这就是我在项目中支持不同屏幕尺寸的方法。
NEW ANSWER: 新答案:
As time passes we learn. 随着时间的推移我们学习。 At the time I wrote this post I had no other solution to manage font sizes rather than use custom code, but right now I don't have to do any of this:
在我写这篇文章时,我没有其他解决方案来管理字体大小而不是使用自定义代码,但是现在我不必做任何这样的事情:
I simply tell our designer to design for the lowest resolution available 320x480 (and give me the font sizes in points instead of pixels) and then I just use points instead of pixels while designing for 320x480. 我只是告诉我们的设计师设计最低分辨率320x480(并给我字母大小而不是像素)然后我只是在设计320x480时使用点而不是像素。
All the screens above 320x480 will be taken care of automatically with react-native, I don't have to write ANY fancy code at all to automatically manage that. 320x480以上的所有屏幕都将自动处理,并且本身是反应原生的,我根本不需要编写任何花哨的代码来自动管理它。
My components now simply look like that: 我的组件现在看起来像这样:
BUTTON_TEXT: { textAlign: 'center', fontSize: 16, // this is 16 points color: 'white', backgroundColor: 'transparent', },
Only a concept, but I'd try following: 只有一个概念,但我会尝试以下:
const Dimensions = require('Dimensions');
const Viewport = Dimensions.get('window');
const IPHONE6_WIDTH = 750; // check this, since I'm not sure about iPhone 6 width
class YourComponent extends React.Component {
constructor(props) {
super(props);
}
getFontSize() {
return ({
fontSize: ((Viewport.width * Viewport.scale) === IPHONE6_WIDTH) ? 14 : 16
});
}
render() {
<View>
<Text style={[styles.facebookText, this.getFontSize()]}>Continue with Facebook</Text>
</View>
}
}
Create a common style for an Application. 为应用程序创建一个通用样式。 Reuse this default style properties in all the style components.
在所有样式组件中重用此默认样式属性。
src/common/style.js SRC /普通/ style.js
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
export const ColorPrimary = '#5CFE48';
export const SmallPhone = () => {
if(width<=320) // Here you could use "react-native-device-info" to get device information.
return true
else
return false
}
In Component style import the common style file. 在“组件”样式中,导入公共样式文件。
import { SmallPhone, ColorPrimary } from '../../common/style';
...
...
const styles = StyleSheet.create({
headerLabel: {
fontSize: SmallPhone() ? 14:26,
color: ColorPrimary
}
});
You could also directly assign specific font size for each device in common style.js and just simply call the SmallPhone
function instead of using ternary operators. 您也可以直接为常用style.js中的每个设备分配特定的字体大小,只需调用
SmallPhone
函数而不是使用三元运算符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.