ReactNative之style使用指南

1. ReactNative中能使用的css样式有哪些呢
   Valid style props: [@H_502_12@

   "alignItems",@H_502_12@

   "alignSelf",@H_502_12@

   "backfaceVisibility",@H_502_12@

   "backgroundColor",@H_502_12@

   "borderBottomColor",@H_502_12@

   "borderBottomLeftRadius",@H_502_12@

   "borderBottomRightRadius",@H_502_12@

   "borderBottomWidth",@H_502_12@

   "borderColor",@H_502_12@

   "borderLeftColor",@H_502_12@

   "borderLeftWidth",@H_502_12@

   "borderRadius",@H_502_12@

   "borderRightColor",@H_502_12@

   "borderRightWidth",@H_502_12@

   "borderStyle",@H_502_12@

   "borderTopColor",@H_502_12@

   "borderTopLeftRadius",@H_502_12@

   "borderTopRightRadius",@H_502_12@

   "borderTopWidth",@H_502_12@

   "borderWidth",@H_502_12@

   "bottom",@H_502_12@

   "color",@H_502_12@

   "elevation",@H_502_12@

   "flex",@H_502_12@

   "flexDirection",@H_502_12@

   "flexWrap",@H_502_12@

   "fontFamily",@H_502_12@

   "fontSize",@H_502_12@

   "fontStyle",@H_502_12@

   "fontWeight",@H_502_12@

   "height",@H_502_12@

   "justifyContent",@H_502_12@

   "left",@H_502_12@

   "letterSpacing",@H_502_12@

   "lineHeight",@H_502_12@

   "margin",@H_502_12@

   "marginBottom",@H_502_12@

   "marginHorizontal",@H_502_12@

   "marginLeft",@H_502_12@

   "marginRight",@H_502_12@

   "marginTop",@H_502_12@

   "marginVertical",@H_502_12@

   "opacity",@H_502_12@

   "overflow",@H_502_12@

   "overlayColor",@H_502_12@

   "padding",@H_502_12@

   "paddingBottom",@H_502_12@

   "paddingHorizontal",@H_502_12@

   "paddingLeft",@H_502_12@

   "paddingRight",@H_502_12@

   "paddingTop",@H_502_12@

   "paddingVertical",@H_502_12@

   "position",@H_502_12@

   "resizeMode",@H_502_12@

   "right",@H_502_12@

   "rotation",@H_502_12@

   "scaleX",@H_502_12@

   "scaleY",@H_502_12@

   "shadowColor",@H_502_12@

   "shadowOffset",@H_502_12@

   "shadowOpacity",@H_502_12@

   "shadowRadius",@H_502_12@

   "textAlign",@H_502_12@

   "textAlignVertical",@H_502_12@

   "textDecorationColor",@H_502_12@

   "textDecorationLine",@H_502_12@

   "textDecorationStyle",@H_502_12@

   "textShadowColor",@H_502_12@

   "textShadowOffset",@H_502_12@

   "textShadowRadius",@H_502_12@

   "tintColor",@H_502_12@

   "top",@H_502_12@

   "transform",@H_502_12@

   "transformMatrix",@H_502_12@

   "translateX",@H_502_12@

   "translateY",@H_502_12@

   "width",@H_502_12@

   "writingDirection"]@H_502_12@

2. style使用内连方式 style={{flex:1,borderColor:'red'}}@H_502_12@
3. style包裹使用style={[styles.style1,styles.style2]}@H_502_12@
4. 同时包裹样式和内连style={[styles.style1,{flex:1,borderWidth:1}]}@H_502_12@

5. StyleSheet提供了一种类似CSS样式表的抽象。@H_502_12@

   创建一个样式表：

   var styles = StyleSheet.create({ container: { borderRadius: 4,borderWidth: 0.5,borderColor: '#d6d7da',},title: { fontSize: 19,fontWeight: 'bold',activeTitle: { color: 'red',}); @H_502_12@@H_502_12@@H_502_12@@H_502_12@@H_502_12@@H_502_12@@H_502_12@

   使用一个样式表：

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