react-native 0.74.0 更新 Yoga 为 v3.0 版本和之前的区别

原文:Yoga

1. 属性方向与行为方向一致

在 0.74 之前如果我们给元素设置了 flexDirection: 'row-reverse' 属性,那么所对应的前后左右的设置都是翻转后的,比如:

tsx 复制代码
<View // #1
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
    width: 200,
    height: 100,
  }}>
  <View // #2
    style={{
      flexDirection: 'row-reverse',
      backgroundColor: 'blue',
      flex: 1,
      marginLeft: 50,
    }}>
    <View // #3
      style={{
        backgroundColor: 'green',
        height: '50%',
        flex: 1,
        marginLeft: 50,
      }}
    />
  </View>
</View>

我们看到 #2 设置的 marginLeft: 50 ,按以前的话,这个时候应该是距离右边的距离,也就是下面第一张图的样式,其中红色部分是 #1 的的背景颜色,蓝色是 #2 的,绿色是 #3 的。而现在保持跟 web 端一致,也就是即便使用 flexDirection: 'row-reverse' ,这个时候左边还是左边,右边是右边。

注意这里的方向可不是仅仅是 marginLeft ,而是任何属性的方向值,例举:marginpaddingborder 等等。 flexDirection: 'column-reverse' 并没有不一样的情况,因为之前就是即便设置了这个值,设置 marginBottom: 20 这样的值仍然是指到底部的距离,而不是由于反转变成顶部了。

2. 支持 align-content: 'space-evenly'

align-content 属性设置如何沿着弹性盒子布局的纵轴在内容项之间和周围分配空间。让我们来看看这几个属性的样式:

tsx 复制代码
<View
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
  }}>
  <View
    style={{
      width: 200,
      height: 250,
      padding: 10,
      flexDirection: 'row',
      alignContent: 'flex-end', // 我们通过改变这个值来看效果
      flexWrap: 'wrap', // 只对子元素换行的有效,需要设置这个
      backgroundColor: 'blue',
    }}>
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
    <View
      style={{margin: 5, height: 50, width: 50, backgroundColor: '#fff'}}
    />
  </View>
</View>
  1. flex-start
  1. flex-end
  1. center
  1. space-around
  1. stretch
  1. space-between
  1. space-evenly

3. 支持 position: 'static'

之前这个属性有两个值: absoluterelative ,其中 relative 是默认值,所以当我们子级设置 position: 'absolute' 后就是相对于父级的,如果我们想相对于父级的父级在以前是不可以的,除非你让父级也是 position: 'absolute' ,如果是这样的话,那么父级的布局也变成定位的了。如果你不想改变父级的布局,那么可以将属性设置成 position: 'static' 。这样子级就相对于父级了。

注意:只要开启新架构这个属性才生效

具体怎么开启新架构,请参考:启用新架构

看例子:

tsx 复制代码
<View // #1
  style={{
    backgroundColor: 'blue',
    width: 200,
    height: 200,
    flexDirection: 'row-reverse',
  }}>
  <View // #2
    style={{
      backgroundColor: 'red',
      width: 100,
      height: 100,
      position: 'static',
    }}>
    <View // #3
      style={{
        backgroundColor: 'white',
        width: 25,
        height: '25%',
        left: 25,
        top: 25,
        position: 'absolute',
      }}
    />
  </View>
</View>

我们可以看到我们设置 #2 的 positionstatic ,这个时候 #3 就是基于 #1 的。看效果:

可以看到白色是相对于 #1 的,包括位置和高度计算都是基于 #1 的。如果我们删掉 #2 的 position: 'static' ,就看到的是下面的效果:

相关推荐
程序猿阿伟1 小时前
《React Native与Flutter:社交应用中用户行为分析与埋点统计的深度剖析》
flutter·react native·react.js
EndingCoder2 天前
跨平台移动开发框架React Native和Flutter性能对比
flutter·react native·react.js
恋猫de小郭3 天前
React Native 前瞻式重大更新 Skia & WebGPU & ThreeJS,未来可期
android·javascript·flutter·react native·react.js·ios
zwjapple4 天前
“ES7+ React/Redux/React-Native snippets“常用快捷前缀
javascript·react native·react.js
程序猿阿伟5 天前
《探索React Native社交应用中WebRTC实现低延迟音视频通话的奥秘》
react native·音视频·webrtc
十步杀一人_千里不留行5 天前
【实战教程】React Native项目集成Google ML Kit实现离线水表OCR识别
react native·react.js·ocr
程序猿阿伟6 天前
《社交应用架构生存战:React Native与Flutter的部署容灾决胜法则》
flutter·react native·架构
流星雨在线7 天前
react naive 网络框架源码解析
网络·react native
老猿阿浪8 天前
突破测试环境文件上传带宽瓶颈!React Native 阿里云 OSS 直传文件格式问题攻克一
react native·阿里云
小妖怪的夏天10 天前
React Native 动态切换主题
javascript·react native·react.js