前言
我们在开发react-native项目的时候，大多数同学都是先在iOS上调试功能，等功能开发完成后，在Android上运行看看适配效果，大多数情况下，我们的一套js代码就能适配iOS、Android两个平台，但是有时候确实有样式适配不统一，在Android上UI错乱的问题。这时我们就要判断不同的平台然后给同一个样式不同的值来达到适配，这样使用三目运算符判断总感觉麻烦，今天我们就来简单讲讲不使用三目运算符判断，如何做到适配两个平台
先来看看两个平台的适配效果
iOS平台
Android
通过上面的效果图我们可以看出，两个不同的平台呈现出来的效果图截然不同。下面我们就来讲讲如何不使用Platform.OS 判断来实现样式适配。
如何使用
如果想直接运行demo项目查看效果请点击
使用Platform.OS 做平台判断：
- 引入样式表组件
import {StyleSheet} from 'react-native'
- 创建样式表
const styles = StyleSheet.create({
platform: {
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
width: Platform.OS === 'ios' ? 120 : 100,
height: Platform.OS === 'ios' ? 120 : 100,
borderRadius: Platform.OS === 'ios' ? 60 : 30,
backgroundColor: Platform.OS === 'ios' ? 'red' : 'green'
}
}
在上面的platform样式对象中，我们对一个View的 width、height、borderRadius、backgroundColor 的值做了两个不同平台的区分，这是最原始的区分平台样式的办法。下面我们介绍另一种适配办法。
自定义StyleSheet组件来适配不同平台样式
封装StyleSheet基础组件工具类
import {StyleSheet} from 'xxx/StyleSheet'
这里需要注意
以前我们导入StyleSheet组件都是从
react-native这个模块里导的，现在我自定义了StyleSheet这个组件，导入时需要导入我们自定义的StyleSheet组价即可。
- 创建样式表
const styles = StyleSheet.create({
box: {
height: 100,
_height: 200,
width: 100,
_width: 200,
backgroundColor: 'red',
_backgroundColor: 'orange',
_borderRadius: 200,
justifyContent: 'center',
alignItems: 'center'
},
textStyle: {
color: 'green',
_color: 'blue',
fontSize: 15,
_fontSize: 25,
_backgroundColor: 'red',
marginBottom: 10,
_marginBottom: 100
}
})
注意
从上面的样式文件中我们可以看出，很多样式属性既有
height: 100，又有_height: 100。这样写有什么区别尼？很简单的理解带下划线和不带下划线的区别。
height: 100:这种写法代表是iOS和Android统一高度为100
_height: 100: 这种就是单独的给Android平台设置样式，只在Android平台上生效。
总结
总体来说感觉使用自定义的StyleSheet组件来适配两个平台的样式还是挺简单的吧，其实使用原生的StyleSheet组件，在需要适配的地方使用三目运算符进行判断也能达到效果，就是当三目运算符太多后，代码的可读性就变差了。
封装StyleSheet工具类代码如下：
/**
* Created by guangqiang on 2017/10/16.
*/
import React, { StyleSheet, Platform } from 'react-native'
class _EnhancedStyleSheet {
static create(styleSheets) {
let keys = Object.keys(styleSheets)
keys.map((key) => {
Object.keys(styleSheets[key]).map((property) => {
if (Platform.OS === 'ios') {
if (property.indexOf('_') === 0) {
delete styleSheets[key][property]
}
} else if (Platform.OS === 'android') {
if (property.indexOf('_') === 0) {
let _newProp = property.substr(1)
styleSheets[key][_newProp] = styleSheets[key][property]
delete styleSheets[key][property]
}
}
})
})
return StyleSheet.create(styleSheets)
}
static flatten(styleSheets) {
return StyleSheet.flatten(styleSheets)
}
}
export {_EnhancedStyleSheet as StyleSheet}
demo项目源码如下
import React, { Component } from 'react'
import {
Text,
View,
Platform
} from 'react-native'
// import {StyleSheet} from 'react-native'
import {StyleSheet} from './StyleSheet'
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>iOS、Android样式适配组件讲解</Text>
<View style={styles.box}>
<Text>iOS平台是正方形，Android平台是圆形</Text>
</View>
<Text style={{marginTop: 20}}>使用Platform判断平台</Text>
<View style={styles.platform}>
<Text>这时使用原始的Platform判断</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
justifyContent: 'center'
},
box: {
height: 100,
_height: 200,
width: 100,
_width: 200,
backgroundColor: 'red',
_backgroundColor: 'orange',
_borderRadius: 200,
justifyContent: 'center',
alignItems: 'center'
},
textStyle: {
color: 'green',
_color: 'blue',
fontSize: 15,
_fontSize: 25,
_backgroundColor: 'red',
marginBottom: 10,
_marginBottom: 100
},
platform: {
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
width: Platform.OS === 'ios' ? 120 : 100,
height: Platform.OS === 'ios' ? 120 : 100,
borderRadius: Platform.OS === 'ios' ? 60 : 30,
backgroundColor: Platform.OS === 'ios' ? 'red' : 'green'
}
})
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
- 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！
