程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> C語言 >> C++ >> C++入門知識 >> React Native -- StyleSheet

React Native -- StyleSheet

編輯:C++入門知識

React Native -- StyleSheet


StyleSheet樣式表來渲染組件的樣式,源碼如下:

 

 /* Code quality:
 *
 *  - By moving styles away from the render function, you're making the code
 *  easier to understand.
 *  - Naming the styles is a good way to add meaning to the low level components
 *  in the render function.
 *
 * Performance:
 *
 *  - Making a stylesheet from a style object makes it possible to refer to it
 * by ID instead of creating a new style object every time.
 *  - It also allows to send the style only once through the bridge. All
 * subsequent uses are going to refer an id (not implemented yet).
 */
class StyleSheet {
  static create(obj: {[key: string]: any}): {[key: string]: number} {
    var result = {};
    for (var key in obj) {
      StyleSheetValidation.validateStyle(key, obj);
      result[key] = StyleSheetRegistry.registerStyle(obj[key]);
    }
    return result;
  }
}
創建StyleSheet

 

 

var styles = StyleSheet.create({
      container: {
        borderRadius: 4,
        borderWidth: 0.5,
        borderColor: '#d6d7da',
      },
      title: {
        fontSize: 19,
        fontWeight: 'bold',
      },
      activeTitle: {
        color: 'red',
      },
    });
StyleSheetRegistry.registerStyle(obj[key]);返回的是一個uniqueID,StyleSheet.create返回的每個key對應的uniqueID,styles存儲key以及對應的uniqueID,設置組件屬性的時候根據key獲取到uniqueID,根據uniqueID獲取對應的樣式。

 

 

var styles = {};
var uniqueID = 1;
var emptyStyle = {};


class StyleSheetRegistry {
  static registerStyle(style: Object): number {
    var id = ++uniqueID;
    if (__DEV__) {
      Object.freeze(style);
    }
    styles[id] = style;
    return id;
  }


  static getStyleByID(id: number): Object {
    if (!id) {
      // Used in the style={[condition && id]} pattern,
      // we want it to be a no-op when the value is false or null
      return emptyStyle;
    }


    var style = styles[id];
    if (!style) {
      console.warn('Invalid style with id `' + id + '`. Skipping ...');
      return emptyStyle;
    }
    return style;
  }
}

 

使用StyleSheet

 


   
設置一個樣式使用style={styles.container}

 

設置多個樣式使用style={[styles.title, this.props.isActive && styles.activeTitle]}不過後面的樣式會覆蓋前面的樣式

 

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved