React Native－15.React Native 常用API及实践 PixelRatio AppStateIOS StatusBarIOS

PixlRatio

简介

PixlRatio 用来获取像素相关的数据。

常用的静态方法：

• get(): 获取像素密度。如：
  

PixelRatio.get()===2
iPhone 4 ，4s
iPhone 5 ，5c ，5s
iPhone 6
PixelRatio.get()===3
iPhone 6plus

• getPixelSizeforLayoutSize(number): 获取一个布局元素的像素大小，其返回值是一个四舍五入的整型，该方法的定义如下：
  

function getFontScale(){
return Dimensions.get('window').fontScale || PixelRatio.get();
}
－ getFontScale(): 获取字体比例，在0.15.0版本中，目前中支持Android，iOS默认还是使用像素密度，该函数定义如下：

function() getFontScale(){
    return Dimensions.get('window').fontScale||PixelRatio.get();
}

来看一个我们获取1 像素密度的的实例：

仔细看看，我们下方的图片会有一个细细的黑色边线。

来看一下代码：

首先我们封装一个组件PixelRatioTest

var React = require('react-native') var { AppRegistry,StyleSheet,View,PixelRatio,Image,}= React; var PixelRatioTest = React.createClass({ render: function(){ return( <View style = {styles.flex}> <Image source = {{uri:'http://avatar.csdn.net/F/3/9/1_wxs0124.jpg'}} style = {[styles.image,styles.top_center]}></Image> <Image source = {{uri:'http://avatar.csdn.net/F/3/9/1_wxs0124.jpg'}} style = {[styles.image,styles.borders,styles.top_center]}></Image> </View> ) } }); //获取一个像素的点 var minP = 1/PixelRatio.get(); var styles = StyleSheet.create({ flex: { flex: 1,},top_center: { marginTop : 74,alignSelf:'center',image : { width: PixelRatio.getPixelSizeforLayoutSize(80),height: PixelRatio.getPixelSizeforLayoutSize(80),borders: { borderWidth: minP,borderColor: '#2f4d3c' } }) module.exports = PixelRatioTest;

在ios.index.js 中我们这样写：

'use strict';
var React = require('react-native');
var PixelRatioTest = require('./iOSFile/pixelRaio.js');

var {
  AppRegistry,Text,ScrollView,WebView,NavigatorIOS,AsyncStorage,TouchableOpacity,} = React;


var styles = StyleSheet.create({
    container : {
        flex: 1
    },row : {
        flexDirection: 'row',marginBottom: 10,item : {
        flex: 1,marginLeft:5,borderWidth: 1,borderColor: '#ddd',marginRight: 5,height: 100,img: {
        flex: 1,backgroundColor: 'transparent',item_text: {
        backgroundColor: '#000',opacity:0.7,color:'#fff',height:25,lineHeight:18,textAlign:'center',marginTop:74
    },btn: {
        backgroundColor: '#ff7200',height: 33,textAlign : 'center',color: '#fff',marginLeft:10,marginRight: 10,lineHeight: 24,marginTop: 40,fontSize: 18,list_item : {
        marginLeft: 5,padding:5,height: 30,borderRadius: 3,list_item_desc : {
        flex: 2,fontSize: 15,list_item_price: {
        flex: 1,textAlign: 'right',clear: {
        marginTop : 10,backgroundColor: '#fff',color: '#000',borderWidth:1,marginLeft: 10,marginRight:10,height:33,textAlign: 'center',}

});

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.container} initialRoute = { { component:PixelRatioTest,title:'样式列表',barTintColor: '#ddd' } }/> ); } }); AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

注 ： ios.index.js代码中有很多和本demo无用的代码。又起在styles 中，大家自己挑选一下。

原文地址：https://www.jb51.cc/react/307124.html