改造React Native StyleSheet API,可根

2016-12-09  本文已影响1384人  reloadRen

我们使用 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,
    },
  },
});
上一篇下一篇

猜你喜欢

热点阅读