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

<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]}不过后面的样式会覆盖前面的样式