React Native入门(十一)之屏幕适配
准备首先,我们在官方文档宽度和高度一节可以知道,RN中单位是dp,这个跟Android中的单位是一致的! A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp:
dp = (width in pixels * 160) / screen density
这里的 screen density 屏幕密度,它约等于(dpi/160),在RN中我们可以通过
说到这里,不妨把涉及到的一些概念梳理一下:
所以我们可以知道: 那么,我们如何在RN中设置宽度为1px的分割线呢? width: 1 / PixelRatio.get()
这样就可以了! 另外,一个设备的宽高,我们可以这样获得: width: Dimensions.get('window').width,height: Dimensions.get('window').height,
那么这个得到的宽高是什么呢? 适配方案所以,这里RN中的适配方案:以6,6s为例: import {Dimensions} from 'react-native';
const deviceWidthDp = Dimensions.get('window').width;
const uiWidthPx = 750;
export default function px2dp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx;
}
deviceWidthDp为当前运行设备的宽度,uiWidthPx为UI设计图的宽度,uiElementPx设计图中标注的元素的px值。 <Image style={{width:px2dp(200),height:px2dp(400)}} source=xxx />
其他我们可以写一个工具类,这些常用的写在一起,方便使用: import {Dimensions,Platform,PixelRatio} from 'react-native'
export default {
width: Dimensions.get('window').width,onePixel: 1 / PixelRatio.get(),STATUSBAR_HEIGHT: (Platform.OS === 'ios' ? 20 : 0),APPBAR_HEIGHT: (Platform.OS === 'ios' ? 44 : 56),}
需要注意的就是:如果这个工具类和调用方不在一个包下边的话,需要我们在工具类这个包下,写一个index.js导出才行,要不然找不到! import ScreenUtil from './ScreenUtil'
...
export {ScreenUtil};
使用的时候就直接: 还有一个问题就是 上边代码是在StackNavigator/Header中,尤其在我们自定义Header标题栏的时候,需要注意要设置 参考文章: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |