你的位置:首页 > 操作系统

[操作系统]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技术专题