如何设置反应原生的不同IOS设备的字体大小 [英] how to set font size for different IOS devices in react native

问题描述

在react-native我设计了一个样本，当我在不同的IOS设备上检查时，
这里是我的代码：

In react-native i design a sample,when i check it in different IOS devices here is my code:

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
    }
})

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

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

推荐答案

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

I've written the following code for my project:

在文件中： 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;
}

然后在每个react-native组件上执行：

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

然后是我的款式我这样做：

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.

另外（与你的问题无关，但无论如何我都要说），我使用与screenWidth和screenHeight相关的宽度和高度，如下所示：

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:

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.

新答案：

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

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:

我只是告诉我们的设计师设计最低分辨率320x480（并给我字母大小而不是像素）然后我在设计320x480时只使用点而不是像素。

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以上的所有屏幕都会自动使用react-native进行处理，我根本不需要编写任何花哨的代码来自动管理它。

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.

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

My components now simply look like that:

BUTTON_TEXT: {
  textAlign: 'center',
  fontSize: 16, // this is 16 points
  color: 'white',
  backgroundColor: 'transparent',
},

这篇关于如何设置反应原生的不同IOS设备的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！