转自http://www.cnblogs.com/suxun/archive/2016/02/27/5222175.html
ReactNative之style使用指南
- ReactNative中能使用的css样式有哪些呢
Valid style props: [ "alignItems", "alignSelf", "backfaceVisibility", "backgroundColor", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "bottom", "color", "elevation", "flex", "flexDirection", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "height", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBottom", "marginHorizontal", "marginLeft", "marginRight", "marginTop", "marginVertical", "opacity", "overflow", "overlayColor", "padding", "paddingBottom", "paddingHorizontal", "paddingLeft", "paddingRight", "paddingTop", "paddingVertical", "position", "resizeMode", "right", "rotation", "scaleX", "scaleY", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "textAlign", "textAlignVertical", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "tintColor", "top", "transform", "transformMatrix", "translateX", "translateY", "width", "writingDirection"]
- style使用内连方式 style={{flex:1,borderColor:'red'}}
- style包裹使用style={[styles.style1,styles.style2]}
- 同时包裹样式和内连style={[styles.style1,{flex:1,borderWidth:1}]}
-
StyleSheet提供了一种类似CSS样式表的抽象。 创建一个样式表： var styles = StyleSheet.create({ container: { borderRadius: 4,borderWidth: 0.5,borderColor: '#d6d7da',},title: { fontSize: 19,fontWeight: 'bold',activeTitle: { color: 'red',}); 使用一个样式表： <View style={styles.container}>
<Text style={[styles.title,this.props.isActive && styles.activeTitle]} /> </View>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
