星空网 > 软件开发 > 操作系统

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技术专题




原标题:ReactNative之style使用指南

关键词:react

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海运有哪些费用:https://www.goluckyvip.com/tag/33667.html
海运有哪些航线:https://www.goluckyvip.com/tag/33668.html
海运约旦:https://www.goluckyvip.com/tag/33669.html
跨境活动吧:https://www.goluckyvip.com/tag/3367.html
海运越南费用:https://www.goluckyvip.com/tag/33670.html
海运越南收费:https://www.goluckyvip.com/tag/33671.html
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流