如何設置反應原生的不同IOS設備的字體大小

Question

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

當我檢查iphone-6和5s字體問題即將到來時，任何人幫我解決這個問題，如何設置不同IOS設備的字體大小在react-native任何幫助很多appriciated

Answer 1

我為我的項目編寫了以下代碼：

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

然后在每個反應原生組件上我做：

 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 

然后我的styles我做：

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

這是習慣，但它對我來說非常好。

另外（與你的問題無關，但無論如何我都要說），我使用與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 } 

這就是我在項目中支持不同屏幕尺寸的方法。

新答案：

隨着時間的推移我們學習。 在我寫這篇文章時，我沒有其他解決方案來管理字體大小而不是使用自定義代碼，但是現在我不必做任何這樣的事情：

我只是告訴我們的設計師設計最低分辨率320x480（並給我字母大小而不是像素）然后我只是在設計320x480時使用點而不是像素。

320x480以上的所有屏幕都將自動處理，並且本身是反應原生的，我根本不需要編寫任何花哨的代碼來自動管理它。

我的組件現在看起來像這樣：

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

Answer 2

只有一個概念，但我會嘗試以下：

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

Answer 3

為應用程序創建一個通用樣式。 在所有樣式組件中重用此默認樣式屬性。

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
}

在“組件”樣式中，導入公共樣式文件。

import { SmallPhone, ColorPrimary } from '../../common/style';
... 
...
const styles =  StyleSheet.create({
  headerLabel: {
    fontSize: SmallPhone() ? 14:26,
    color: ColorPrimary
  }
});

您也可以直接為常用style.js中的每個設備分配特定的字體大小，只需調用SmallPhone函數而不是使用三元運算符。