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