如何在react native中设置不同IOS设备的字体大小
how to set font size for different IOS devices in react native
在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字体问题来了有谁能帮我解决这个问题,如何在react-native中设置不同IOS设备的字体大小吗?
我已经为我的项目编写了以下代码:
在文件: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组件上:
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
},
});
这是习惯,但对我来说效果很好。
另外(与你的问题无关,但我还是要说),我使用与屏幕宽度和屏幕高度相关的宽度和高度,如下所示:
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以上的屏幕都将被react-native自动处理,我不需要编写任何花哨的代码来自动管理它。
我的组件现在看起来就像这样:
BUTTON_TEXT: {
textAlign: 'center',
fontSize: 16, // this is 16 points
color: 'white',
backgroundColor: 'transparent',
},
只是一个概念,但我会尝试以下内容:
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>
}
}
为应用程序创建通用样式。在所有样式组件中重用这个默认样式属性。
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
}
在Component style中导入通用样式文件
import { SmallPhone, ColorPrimary } from '../../common/style';
...
...
const styles = StyleSheet.create({
headerLabel: {
fontSize: SmallPhone() ? 14:26,
color: ColorPrimary
}
});
您也可以直接在common style.js中为每个设备指定特定的字体大小,只需调用SmallPhone
函数而不是使用三元操作符。
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何确定javascript已经完成了某些操作.ios上的
- 用Javascript更改我网站上的字体大小
- 压缩phonegap中ios的图像插件
- 不同字体的字母间距不同
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何在谷歌字体加载时显示加载图像
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- PhoneGap选项卡栏自定义字体,背景图案
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- iOS 中的按钮触摸状态
- 在iOS 4.3中未调用UIWebView shouldStartLoadWithRequest
- 在iOS和Android上使用React native时,我还能使用本机第三方lirbraries吗
- iOS 应用程序(iPhone 和 iPad)中的阿拉伯字体
- 我如何使用与使用react native的ios相同的android自定义字体
- 如何在react native中设置不同IOS设备的字体大小
- 在我的sencha-touch/phonegap应用程序中设置IOS和Android字体的最佳方法是什么?
- safari ios (iPad) -自定义字体不工作的javascript生成的文本
- iOS textput高度相对于字体大小