ReactNative_中iOS和Android的style分开设置教程
ReactNative_中iOS和Android的style分开设置教程
mikimo
发布于 2022-07-20 13:44:19
发布于 2022-07-20 13:44:19
reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了.
但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的.
我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花, 会很浪费, 而且代码冗余, 也导致重用代码率也低了.
在此跟大家介绍一个很好的解决办法, 只需要建一个style文件即可解决.
1.新建一个js文件(StyleSheet.js)
'use strict';
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);
}2. 然后在需要分别设置两个系统样式的地方导入该类, 而不需要再从'react-native'里导入了
const StyleSheet = require('./StyleSheet'); //假设在同一文件夹下
然后style就可以这样设置了:
const styles = StyleSheet.create({
container:{
flex:1,
ios: {
marginTop:64,
},
android: {
marginTop:44,
},
}
})然后程序就会根据系统分别设置两个不同的marginTop了.
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-07-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
