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