ReactNative之style使用指南

1. 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"]

2. style使用內連方式 style={{flex:1,borderColor:'red'}}
3. style包裹使用style={[styles.style1,styles.style2]}
4. 同時包裹樣式和內連style={[styles.style1,{flex:1,borderWidth:1}]}

5. 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>

 ReactNative高級交流群 127482131 或訪問   ReactNative技術專題