React Native中的布局

  • Z时代
  • 2024-01-10
  • 分类：综合

react

  1. 使用width和height

    react native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点

<View style={{width:100,height:100,backgroundColor: 'gray'}}>
    <Text style={{fontSize: 16}}>测试字体</Text>
</View>

上面的width、height、fontSize在android中宽和高被解析成dp、字体被解析为sp；iOS上宽和高被解析为pt，虽然width和height不能带有单位但是 style={{width:'100%',height:'100%'}}依然生效(0.57版本中,其它版本没有验证)

2. 使用Flexbox
flexDirection用来确定主轴的方向，值可以为'row'或'column'，默认值是'column'

justifyContent设置子元素沿着主轴的排列方式。可选值有 flex-start、center、flex-end、space-around、space-between、space-evenly。效果如下(flexDirection:‘row’)：

alignItems设置其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。可选项有：flex-start、center、flex-end以及stretch

flexWrap置子元素超出以后是否换行。值可以是wrap或nowrap。效果如下：

alignSelf值可以是’auto’|‘flex-start’|‘center’|‘flex-end’|‘stretch’ 设置当前子元素在次轴上的对齐方式

说明：flexDirection、justfyContent、alignItems、flexWrap是使用在父元素上的。alignSelf是使用在子元素上的。flex属性既可以使用在父元素上也可以使用在子元素上

以上是 React Native中的布局 的全部内容， 来源链接： utcz.com/z/381998.html

回到顶部