react-native全局使用rem和px

react-native官方提供的是dp值，所以不同分辨率的设备之间会造成显示上的差异。所以可以使用前端最常用的rem方式来进行适配，对于个别需要真实像素的地方，可以使用px像素进行适配。

我的项目目录大概是这样的

-src
     -constant
     -screens
     ...
app.js
index.js

1、首先在constant目录下创建Global.js提供暴露给全局的常量

// Global.js  当然可以挂载其他常用的全局常量，例如判断平台ios还是android等...
import { Dimensions, PixelRatio } from 'react-native';

// 是否横屏来判断真实屏幕宽高
var relWidth = Dimensions.get('window').width
var relHeight = Dimensions.get('window').height
if (relWidth > relHeight) {
    let change = relWidth
    relWidth = relHeight
    relHeight = change
}
const { width, height } = Dimensions.get('window')
// 注意这里根据UI原稿用对应的屏幕像素宽度替换掉375即可达到原稿的显示比例
const remScale = width / 375
const pxScale = 1 / PixelRatio.get()

global.gScreen = {
    screen_width: width,
    screen_height: height,
}

// 解决不同设备间的显示差异
global._rem = function (number) {
    return number * remScale
}
global._px = function (number) {
    return number * pxScale
}

2、在index.js中，所有的import之前导入Global.js

// index.js
// 所有的import之前导入Global，一定格外注意
import Global from './src/contants/Global'
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

3、在任意组件或页面内部可以直接使用_rem()、_px()方法

const styles = StyleSheet.create({
    viewTest: {
        height: _rem(375),
        width: _rem(200),
        // height:_px(375),
        // width:_px(200)
    }
)