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了.