前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

React Native之图片/宽高/字体平台适配

首页
2019-10-02 12:50:12
Front-End
RNreact

# 一、Platform.OS

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用StatusBar做导航栏的时候,在iOS平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏,所以我们需要为StatusBar的外部容器设置一个高度

<View style={{height: Platform.OS === 'ios' ? 20:0}}>
    <StatusBar {...this.props.statusBar} />
</View>;
@前端进阶之旅: 代码已经复制到剪贴板

# 二、留意api doc的android或ios标识

并不是所有React Native的一些api或组件的一些属性和方法都兼容Android和iOS,在React Native的api doc中通常会在一些属性或方法的前面加上android或ios的字样来标识该属性或方法所支持的平台,如

android renderToHardwareTextureAndroid bool
ios shouldRasterizeIOS bool
@前端进阶之旅: 代码已经复制到剪贴板

在上述代码中,renderToHardwareTextureAndroid bool只支持Android平台,ios shouldRasterizeIOS bool只支持iOS平台,所有我们在使用这些带有标记的属性或方法的时候就需要考虑对于它们不兼容的平台我们是否需要做相应的适配了

# 三、组件选择

比如,我们要开发一款应用需要用到导航组件,在React Native组件中有NavigatorIOS与Navigator两个导航组件来供我们选择,从api doc中我们可以看出NavigatorIOS只支持iOS平台,Navigator则两个平台都支持。 所以如果我们要开发的应用需要适配Android和iOS,那么Navigator才是最佳的选择。

为了提高代码的复用性与兼容性建议大家在选择React Native组件的时候要多留意该组件是不是兼容Android和iOS,尽量选择Android和iOS平台都兼容的组件。

# 四、图片适配

开发一款应用少不了的需要用到图标。无论是Android还是iOS,现在不同分辨率的设备越来越多,我们希望这些图标能够适配不同分辨率的设备。为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸,React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。比如:在img目录下有如下三种尺寸的check.png

└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png
@前端进阶之旅: 代码已经复制到剪贴板

那么我们就可以通过下面的方式来使用check.png

<Image source={require('./img/check.png')} />
fe
  • 一、Platform.OS
  • 二、留意api doc的android或ios标识
  • 三、组件选择
  • 四、图片适配
  • 五、字体/宽高适配

← React Native之启动流程React Native之相机扫码 →