ReactNative中iOS和Android的style分開設置教程

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