javascript – 如何设置反应原生的不同IOS设备的字体大小

前端之家收集整理的这篇文章主要介绍了javascript – 如何设置反应原生的不同IOS设备的字体大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在react-native中我设计了一个样本,当我在不同的 IOS设备中检查它时
这是我的代码
  1. render() {
  2. return (
  3. <View style={styles.container}>
  4. <View style={styles.body}>
  5. <TouchableHighlight style={styles.facebook} >
  6. <View style={styles.row}>
  7. <Image style={styles.icon} source={require('image!fb')}/>
  8. <Text style={styles.facebookText} >Continue with Facebook</Text>
  9. </View>
  10. </TouchableHighlight>
  11. </View>
  12. </View>
  13. )
  14. }
  15. };
  16. var styles = StyleSheet.create({
  17. container:{
  18. marginTop: 65,flexDirection:'column',flex:1,backgroundColor:'transparent'
  19. },body:{
  20. flex:.5
  21. },facebook:{
  22. marginTop: 25,height: 50,padding: 10,marginRight: 40,marginLeft: 40,backgroundColor: '#1A8A29',},row:{
  23. flexDirection:'row',facebookText:{
  24. marginLeft: 8,fontSize: 20,color: 'white',alignSelf:'center'
  25. },icon:{
  26. marginTop: 3,marginLeft: 5,width: 25,height: 25
  27. }
  28. })

当我检查iphone-6和5s字体问题即将到来
任何人帮我解决这个问题,如何设置反应原生不同的IOS设备的字体大小任何帮助很多appriciated

解决方法

我为我的项目编写了以下代码

文件:multiResolution.js我有:

  1. export function getCorrectFontSizeForScreen(PixelRatio,screenWidth,screenHeight,currentFont){
  2. let devRatio = PixelRatio.get();
  3. let factor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0;
  4. let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down
  5. // console.log("The factor is: "+factor);
  6. if(factor<=1){
  7. return currentFont-float2int(maxFontDifferFactor*0.3);
  8. }else if((factor>=1) && (factor<=1.6)){
  9. return currentFont-float2int(maxFontDifferFactor*0.1);
  10. }else if((factor>=1.6) && (factor<=2)){
  11. return currentFont;
  12. }else if((factor>=2) && (factor<=3)){
  13. return currentFont+float2int(maxFontDifferFactor*0.65);
  14. }else if (factor>=3){
  15. return currentFont+float2int(maxFontDifferFactor);
  16. }
  17.  
  18. }
  19.  
  20. function float2int (value) {
  21. return value | 0;
  22. }

然后在每个反应原生组件上我做:

  1. import { PixelRatio } from 'react-native';
  2. import {getCorrectFontSizeForScreen} from './multiResolution'
  3. import Dimensions from 'Dimensions';
  4. const {height:h,width:w} = Dimensions.get('window'); // Screen dimensions in current orientation

然后我的风格我做:

  1. var portraitStyles = StyleSheet.create({
  2. titleText: {
  3. fontSize: getCorrectFontSizeForScreen(PixelRatio,w,h,27),//magic takes place here
  4. },});

这是习惯,但它对我来说非常好.

另外(与你的问题无关,但无论如何我都要说),我使用与screenWidth和screenHeight相关的宽度和高度,如下所示:

  1. aStyleForAnElement:{ //this element will occupy
  2. width: w*0.55,//55% of the screen width
  3. height:h*0.05 //5% of the screen height
  4. }

这就是我在项目中支持不同屏幕尺寸的方法.

新答案:

随着时间的推移我们学习.
在我写这篇文章时,我没有其他解决方案来管理字体大小而不是使用自定义代码,但是现在我不必做任何这样的事情:

我只是告诉我们的设计师设计最低分辨率320×480(并给我字母大小而不是像素)然后我只是在设计320×480时使用点而不是像素.

320×480以上的所有屏幕都将自动处理,并且本身是反应原生的,我根本不需要编写任何花哨的代码自动管理它.

我的组件现在看起来像这样:

  1. BUTTON_TEXT: {
  2. textAlign: 'center',fontSize: 16,// this is 16 points
  3. color: 'white',backgroundColor: 'transparent',

猜你在找的JavaScript相关文章