React Native 开发中,大多数的组件都是IOS和Android通用的,包括大量的功能性代码,至少有80%以上的代码可以复用,而剩下的一些组件样式/少量的代码会需要区分双端,但是为了这少量的代码把IOS和Android完全区分这明显不合适,代码复用性下降,代码维护量上升,明显是不合理的。
本文借鉴网上的教程,为大家介绍如何为IOS端和Android端设置不同的style样式,让一套代码双端适用。本文仅解决部分组件的style样式,后期如果遇到其它的代码类型也会为大家提供教程。
React Native 版本:`0.55.4`,因为0.56版RN在Window端报错,所以Mac也习惯使用0.55.4
由于IOS的屏幕设定,IOS端一般需要设置一个marginTop:20的属性,而android是不需要的,这里以此为例
实现原理:重定义RN自带的StyleSheet组件中的create方法,添加IOS和android判断。
步骤一、新建一个StyleSheet.js文件,输入以下代码
-
import {StyleSheet, Platform} from 'react-native';
-
export function create(styles: Object): {[name: string]: number} {
-
const platformStyles = {};
-
Object.keys(styles).forEach((name) => {
-
let {ios, android, ...style} = {...styles[name]};
-
if (ios && Platform.OS === 'ios') {
-
style = {...style, ...ios};
-
}
-
if (android && Platform.OS === 'android') {
-
style = {...style, ...android};
-
}
-
platformStyles[name] = style;
-
});
-
return StyleSheet.create(platformStyles);
-
}
步骤二,视图页面取消RN中StyleSheet的调用,添加自定义的StyleSheet
-
import React, { Component } from 'react';
-
import { Text, View} from 'react-native';/*/这里不再引入StyleSheet*/
-
/*引入自定义的StyleSheet文件,假设上面定义的文件与当前文件在同一目录下*/
-
const StyleSheet = require('./StyleSheet');
-
const styles = StyleSheet.create({
-
container:{
-
flex:1,
-
alignItems:'center',
-
justifyContent:'center',
-
ios:{
-
marginTop:20,
-
backgroundColor:'red',
-
}
-
android:{
-
backgroundColor:'blue',
-
}
-
}
-
});
-
export default class HomeView extends Component<Props> {
-
render(
-
return (
-
<View style={styles.container}>
-
<Text>请自行查看效果</Text>
-
</View>
-
)
-
)
-
}
图片就不放了,请自行测试效果
注:本文方法会导致StyleSheet中的常量失效,需要在使用时按上面的方法重新定义