zoukankan      html  css  js  c++  java
  • 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了.

  • 相关阅读:
    Insus Meta Utility
    The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.
    Insus Binary Utility
    asp.net实现文件下载功能
    Column 'Column Name' does not belong to table Table
    程序已被编译为DLL,怎样去修改程序功能
    如何在Web网站实现搜索功能
    如何把数据流转换为二进制字符串
    Asp.net更新文件夹的文件
    如何显示中文月份
  • 原文地址:https://www.cnblogs.com/itgezhu/p/11037678.html
Copyright © 2011-2022 走看看