react-native布局和样式设置

前端之家收集整理的这篇文章主要介绍了react-native布局和样式设置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


  1. const styles = StyleSheet.create({
  2. // 样式名称
  3. nameStyle: {
  4. // 方向:默认纵向column,横向row
  5. flexDirection: column,// 分行:wrap,或nowrap
  6. flexWrap: wrap,// flex-start、flex-end、center、space-between、space-around
  7. justifyContent: 'flex-start',// flex-start、flex-end、center、stretch
  8. alignItems: 'flex-start',// 当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)。
  9. flex: 1,// auto,flex-start,flex-end,center,stretch
  10. alignSelf: auto,// 定位:绝对定位relative,相对定位absolute,固定定位pix
  11. position: absolute,// 定位左边缘
  12. left: 10,// 定位右边缘
  13. right: 10,// 定位上边缘
  14. top: 10,// 定位下边缘
  15. bottom: 10,// 背景颜色
  16. backgroundColor: 'black',// 内边距(文字距离Text组件的边距)
  17. padding: 10,// 上内边距
  18. paddingTop: 5,// 下内边距
  19. paddingBottom: 5,// 左内边距
  20. paddingLeft: 5,// 右内边距
  21. paddingRight: 5,// 左右内边距
  22. paddingHorizontal: 10,// 下上内边距
  23. paddingVertical: 10,// 坐标(四周)距离四周都是 10
  24. margin: 10,// x 坐标 (外边距-距离左边,或右边) ------ 与根视图的两个属性关联justifyContent & alignItems
  25. marginLeft: 10,marginRight: 0,// y 坐标 (外边距-距离上边,或下边) ------ 与根视图的两个属性关联justifyContent & alignItems
  26. marginTop: 50,marginBottom: 30,// 字体名称(楷体、方正等)
  27. fontFamily:'',// 字体样式(粗体、斜体等)
  28. fontStyle: '',// 字体大小
  29. fontSize: 20,// 字体排版,即对齐方式 (auto、left、right、center、justify)
  30. textAlign: 'left',// 字体颜色
  31. color:'red',// 边框样式 (solid-固体/立方体、dotted-布满的/打点的、dashed-虚线)
  32. borderStyle: 'dashed',// 边框颜色
  33. borderColor:'red',// 边框圆角
  34. borderRadius: 9,// 边框宽度
  35. borderWidth: 1,// 上边框宽度
  36. borderTopWidth: 1,// 左边框宽度
  37. borderLeftWidth: 1,// 右边框宽度
  38. borderRightWidth: 1,// 下边框宽度
  39. borderBottomWidth: 1,// Text组件的影子颜色
  40. shadowColor: "red",// Text组件的影子倾斜度
  41. shadowOffset: 10,// 内容文本影子颜色
  42. textShadowColor: "red",// 前置颜色(一般用不到)tintColor: 'red',// 组件高度
  43. height: 85,// 组件宽度
  44. width: 350,// 组件最大高度,自适应宽度情况下用到maxHeight: 80,// 组件最大宽度,自适应高度情况下用到maxWidth: 80,},});


颜色设置格式

  • '#f0f'(#rgb)
  • '#f0fc'(#rgba)
  • '#ff00ff'(#rrggbb)
  • '#ff00ff00'(#rrggbbaa)
  • 'rgb(255,255,255)'
  • 'rgba(255,1.0)'
  • 'hsl(360,100%,100%)'
  • 'hsla(360,monospace;font-size:12.600000381469727px;">'transparent'
  • 'red'
  • 0xff00ff00(0xrrggbbaa)


Text组件的字体垂直对齐方式

1、当Text没有被其他组件包含时,设置属性lineHeight的高度等于组件的高度。

2、当Text被其他组件B包含时,可以设置其他组件B的属性justifyContent的值为center

猜你在找的React相关文章