我们使用 React Native ,需要根据代码在不同的平台上运行,应用不同的样式。可以通过改造React Native StyleSheet API的方式。
import { StyleSheet, Platform } from 'react-native';
function create(styles) {
const platformStyles = {};
Object.keys(styles).forEach((name) => {
const { ios, android, ...style } = styles[name];
let xeStyle = style;
if (ios && Platform.OS === 'ios') {
xeStyle = { ...style, ...ios };
}
if (android && Platform.OS === 'android') {
xeStyle = { ...style, ...android };
}
platformStyles[name] = xeStyle;
});
const result = StyleSheet.create(platformStyles);
return result;
}
export default {
...StyleSheet,
create,
};
通过以上代码改造完成后,引入使用:
import StyleSheet from '../../utils/rzStyleSheet';
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#000',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
ios: {
top: 64,
},
android: {
top: 44,
},
},
});
网友评论