react-native布局和样式设置

最新推荐文章于 2024-08-26 09:06:53 发布

番薯大佬

最新推荐文章于 2024-08-26 09:06:53 发布

阅读量5.1k

点赞数 2

分类专栏： react-native学习文章标签： React-Native RN rn布局 rn样式

本文链接：https://blog.csdn.net/potato512/article/details/80253253

版权

本文探讨了React-Native中的布局和样式设置，包括颜色的多种设置格式，如(#rgb)、(#rgba)等。同时，文章详细介绍了如何实现Text组件的字体垂直对齐，提出了两种方法：1. 当Text独立时，通过设置lineHeight等于组件高度；2. 当Text位于其他组件内，可通过修改外层组件的justifyContent属性为center来实现居中对齐。

摘要由CSDN通过智能技术生成

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

react-native学习交流QQ群：806870562

const styles = StyleSheet.create({
  // 样式名称
  nameStyle: { 
  	// 方向：默认纵向column，横向row
  	flexDirection: column,
  	// 分行：wrap，或nowrap
  	flexWrap: wrap,
  	// flex-start、flex-end、center、space-between、space-around
    justifyContent: 'flex-start', 
    // flex-start、flex-end、center、stretch
    alignItems: 'flex-start',  

  	// 当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）。
    flex: 1, 
    // auto, flex-start, flex-end, center, stretch
    alignSelf: auto,
       
    // 定位：绝对定位relative，相对定位absolute，固定定位pix
    position: absolute,
    // 定位左边缘
    left: 10,
    // 定位右边缘
    right: 10,
    // 定位上边缘
    top: 10,
    // 定位下边缘
    bottom: 10,

  	// 背景颜色
    ba