React Native 0.74 发布,Yoga 3.0、Bridgeless 新架构

来源: OSCHINA
2024-04-23 15:44:59

React Native 0.74 现已发布,此版本包含来自 57 位贡献者的超过1673 项 commit。

新增了 Yoga 3.0、新架构下默认的 Bridgeless、批量 onLayout 更新(新架构)以及作为新项目默认包管理器的 Yarn 3。还删除了已弃用的 API,包括 PropTypes 的移除和对 PushNotificationIOS 的破坏性变更。在 Android 上,SDK 23 (Android 6.0) 现在是最低支持版本。

Yoga 3.0

New Layout Behaviors

Yoga 3.0 通过提高样式的可预测性来改进布局,并支持为 Web 编写的渲染组件。此外,考虑到可能会对大量组件造成影响,React Native 会继续有意保留一些不正确的布局行为。计划在未来版本中,对布局一致性进行更精细的配置。

STYLE
<View
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
    width: 200,
    height: 100,
  }}>
  <View
    style={{
      flexDirection: 'row-reverse',
      backgroundColor: 'blue',
      flex: 1,
      marginLeft: 50,
    }}>
    <View
      style={{
        backgroundColor: 'green',
        height: '50%',
        flex: 1,
        marginLeft: 50,
      }}
    />
  </View>
</View>
 

align-content: 'space-evenly'的支持 

position: 'static'的支持position: 'static'仅在新架构中受支持)

<View
  style={{
    backgroundColor: 'blue',
    width: 200,
    height: 200,
    flexDirection: 'row-reverse',
  }}>
  <View
    style={{
      backgroundColor: 'red',
      width: 100,
      height: 100,
      position: 'static',
    }}>
    <View
      style={{
        backgroundColor: 'green',
        width: 25,
        height: '25%',
        left: 25,
        top: 25,
        position: 'absolute',
      }}
    />
  </View>
</View>
 

新架构:Bridgeless by Default

将 Bridgeless Mode 设为启用新架构时的默认模式,可以在这篇文章中了解更多详细信息。为了让过渡更顺利,项目团队增强了互操作层以  cover Bridgeless,并与多个库合作以确保可以在 Bridgeless 模式下顺利使用。

同时还改进了新渲染器互操作层(New Renderer Interop layers),并设置为默认启用。有关新架构的更多信息,可以在 react-native-new-architecture 存储库中查看文档。

新架构:Batched onLayout updates

onLayout callbacks 中的 State updates 现在可以分批进行。

function MyComponent(props) {
  const [state1, setState1] = useState(false);
  const [state2, setState2] = useState(false);

  return (
    <View>
      <View
        onLayout={() => {
          setState1(true);
       }}>
      <View
         onLayout={() => {
          // When this event is executed, state1's new value is no longer observable here.
          setState2(true);
        }}>
      </View>
    </View>
  );
}

Yarn 3 for New Projects

Yarn 3 现在是使用 React Native Community CLI 初始化的新项目的默认 JavaScript 包管理器。

Yarn 3.x 将与nodeLinker: node-modules一起使用,这是一种与 React Native 库兼容的模式。这将取代以前的默认 Yarn Classic(1.x,已弃用)。要升级现有应用程序中的 Yarn 版本,可以按照本指南进行操作。

$ yarn --help
━━━ Yarn Package Manager - 3.6.4 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  $ yarn <command>

Community CLI 还支持通过--pmflag 与其他包管理器一起初始化项目(了解更多)。

更多详情可查看官方公告

展开阅读全文
点击加入讨论🔥(1) 发布并加入讨论🔥
1 评论
1 收藏
分享
返回顶部
顶部