美文网首页
改造React Native StyleSheet API,可根

改造React Native StyleSheet API,可根

作者: reloadRen | 来源:发表于2016-12-09 16:58 被阅读1384次

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

    相关文章

      网友评论

          本文标题:改造React Native StyleSheet API,可根

          本文链接:https://www.haomeiwen.com/subject/yctymttx.html