React Native -- StyleSheet
2015-10-09 13:50
399 查看
StyleSheet样式表来渲染组件的样式,源码如下:
使用StyleSheet
设置多个样式使用style={[styles.title, this.props.isActive && styles.activeTitle]}不过后面的样式会覆盖前面的样式
/* 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]}不过后面的样式会覆盖前面的样式
相关文章推荐
- ReactiveCocoa<一>
- React Native入门遇到的一些问题
- react native camera
- 这样好用的ReactiveCocoa,根本停不下来【转载】
- React框架
- React入门2
- React入门1
- React使用指南
- ReactJs 组件间数据传递
- reactor和proactor的区别
- ACE反应器(Reactor)模式(4)
- ACE反应器(Reactor)模式(3)
- ACE反应器(Reactor)模式(2)
- ACE反应器(Reactor)模式(1)
- React-Native学习指南
- Reactor 和 proactor 的区别
- React Native 初探(iOS)
- 初探React,将我们的View标签化
- 初学Reactjs
- 菜鸟iOS 开发之MVC MVVM ReactiveCocoa