React Native -- StyleSheet

来源：互联网发布：mac os 最好的版本编辑：程序博客网时间：2024/05/17 06:40

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

<View style={styles.container}>   <Text style={[styles.title, this.props.isActive && styles.activeTitle]} /></View>

设置一个样式使用style={styles.container}

设置多个样式使用style={[styles.title, this.props.isActive && styles.activeTitle]}不过后面的样式会覆盖前面的样式

0 0