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中的常量失效,需要在使用时按上面的方法重新定义