12 篇博文 含有标签「发布」

今天我们很高兴发布 React Native 0.76！

这是 React Native 的一个重要里程碑，因为我们默认启用了新架构，并推出了 React Native 开发者工具。这是我们团队经过 6 年努力工作，再加上我们出色的开发者社区支持的成果。

亮点​

• 默认启用 React Native 新架构
• React Native 开发者工具
• 更快的 Metro 解析
• 盒阴影和滤镜样式属性

重大变更​

• 移除对 react-native-community/cli 的依赖
• Android 应用体积减少约 3.8MB，得益于本地库合并
• 更新最低支持的 iOS 与 Android SDK 版本要求

今天我们发布了 React Native 0.74！本次发布引入了 Yoga 3.0、新架构下默认启用的无桥接模式、批量处理的 onLayout 更新（新架构），以及为新项目默认使用 Yarn 3 作为包管理器。

我们还移除了废弃的 API，包括 PropTypes 的移除和对 PushNotificationIOS 的破坏性更改。Android 平台现在最低支持的 SDK 版本为 23（Android 6.0）。

亮点​

• Yoga 3.0
• 新架构：默认启用无桥接模式
• 新架构：批量处理 onLayout 更新
• 新项目默认使用 Yarn 3

破坏性变更​

• Android 最低 SDK 版本提升（Android 6.0）
• PushNotificationIOS API 变更（废弃）
• 移除废弃的 PropTypes
• 移除 Flipper React Native 插件
• 其他破坏性变更

今天我们发布了 React Native 0.71 版本！这是一个功能丰富的版本，包含：

• 默认使用 TypeScript
• 使用 Flexbox 间隙简化布局
• 受 Web 启发的无障碍、样式和事件属性
• 恢复 PropTypes
• 开发者体验改进
• 新架构更新

本文将介绍 0.71 版本的一些亮点。

我们很高兴发布 React Native 的新版本 0.70.0。此版本带来了多个改进，比如 Codegen 的新统一配置、Hermes 作为默认引擎、Android 构建的完整 CMake 支持，以及针对新架构的文档更新。继续阅读以了解更多内容！

目录​

• 新架构中的新文档
• Hermes 作为默认引擎
• Codegen 的新统一配置
• Android 自动链接新架构库
• Android 构建的完整 CMake 支持
• 0.70 亮点

去年十月，我们宣布开始着手将 Hermes 设为所有 React Native 应用的默认引擎。

Hermes 为 Meta 内部的 React Native 带来了巨大价值，我们相信开源社区也将从中受益。Hermes 设计用于资源受限的设备，针对启动速度、应用体积和内存消耗进行了优化。Hermes 与其他 JavaScript 引擎的一个关键区别是它能提前将 JavaScript 源代码编译为字节码。预编译的字节码会被打包进二进制文件，避免了解释器在应用启动时执行这一步昂贵操作。

自公告以来，我们投入了大量工作来改进 Hermes。今天，我们很高兴地宣布，React Native 0.70 将默认使用 Hermes 引擎。 这意味着从 v0.70 开始的新项目将默认启用 Hermes。随着 7 月的版本发布临近，我们希望与社区密切合作，确保过渡顺利并为所有用户带来价值。本文将介绍此次变更的预期效果、性能基准、主要新功能等。注意，你无需等待 React Native 0.70 就能开始使用 Hermes —— 你可以按照这份指南在现有 React Native 应用中启用 Hermes。

另外，尽管在新项目中 Hermes 将是默认选项，其他引擎的支持仍将继续。

今天我们发布了 React Native 0.65 版本，带来了新版 Hermes、无障碍功能改进、依赖包升级等诸多更新。

Hermes 0.8 有哪些新特性？​

Hermes 是 Facebook 为 React Native 优化的开源 JavaScript 虚拟机，本次升级到了 0.8.1 版本。本次发布的一些亮点功能包括：

• 引入了新的并发垃圾回收器 “Hades”，在 64 位设备上暂停时间最多缩短 30 倍。在 Facebook 内部，我们观察到部分 CPU 密集型任务性能提升了 20%-50%。可在此了解 Hades。
• ECMAScript 国际化 API (ECMA-402，简称 Intl) 现已内置于 Android 版本的 Hermes 并默认启用，API 大小开销仅为 57-62K（相比之下，JSC 达到 6MiB）。因此 Hermes 用户不再需要地区语言相关的 polyfill。特别感谢 @mganandraj 及微软的合作伙伴们促成了这项实现！
• iOS 版 Hermes 现已支持 Apple M1 Mac 和 Mac Catalyst！
• 内存优化，包括小整数（SMI）和指针压缩，使 JS 堆内存缩小了 30%。
• Function.prototype.toString 的改动，修复了因错误的特征检测导致的性能下降，并支持了源码注入的使用场景。

完整的 Hermes 更新日志请见此处。

如果你尚未启用 Hermes，请按这里的步骤将你的应用切换到 Hermes，以享受以上新特性和性能提升！

无障碍修复和新增功能​

去年，Facebook 承诺加入 GAAD 提升 React Native 的无障碍体验。0.65 版本汇报了该承诺带来的成果以及其他无障碍改进！主要变化包括：

• 允许在 iOS 上指定高对比度的浅色和深色值，详情请参阅文档。
• 在 Android 上新增了 getRecommendedTimeoutMillis API。该接口公开了用户在 Android 无障碍选项中设置的默认超时时间，方便需要更多时间查看或操作控件的用户。
• 修复了 TalkBack/VoiceOver 对组件状态（例如 disabled 和 unselected）的正确朗读。

你可以在这里关注或参与我们待解决的无障碍问题！

依赖版本更新及注意事项​

• react-native-codegen 版本 0.0.7 现在需要作为 package.json 中的 devDependency。
• JCenter 已经停止服务并转为只读。我们已移除 JCenter Maven 仓库，相关依赖改用 MavenCentral 和 Jitpack。
• OkHttp 升级到 v4.9.1，详情参见升级到 OkHttp 4。
• Flipper 升级到 0.93 版本，以支持 Xcode 12.5。详见 Flipper 更新日志。
• 支持 Android Gradle Plugin 7。
• Apple Silicon 需要链接器的补丁，具体见 @mikehardy 的说明。

感谢！​

此次发布包含了来自 61 位贡献者 的超过 1100 条提交。感谢所有为本次版本贡献和支持的朋友！完整更新日志请见 这里。

今天我们发布了 React Native 0.64，新增了在 iOS 上支持 Hermes。

iOS 上的 Hermes 选择启用​

Hermes 是一个开源的 JavaScript 引擎，专为运行 React Native 优化。它通过减少内存使用、减小下载包体积以及缩短应用可用时间（即“交互时间”，TTI）来提升性能。

在本次发布中，我们很高兴地宣布，你现在也可以在 iOS 上使用 Hermes。要启用 iOS 上的 Hermes，请在你的 Podfile 中将 hermes_enabled 设置为 true，然后运行 pod install。

use_react_native!(
   :path => config[:reactNativePath],
   # 在 iOS 上启用hermes，将 false 改为 true 并安装 pods
   :hermes_enabled => true
)

请注意，iOS 上的 Hermes 支持仍处于早期阶段。我们暂时保持其为可选启用状态，同时继续进行基准测试。我们鼓励你在自己的应用中尝试，并告知我们其表现如何！

默认启用 Inline Requires​

Inline Requires 是 Metro 的一个配置选项，它通过延迟 JavaScript 模块执行直到实际使用时，来提升启动速度，而不是在启动时全部执行。

该功能已存在多年，并作为一个可选配置在我们的性能文档部分中推荐使用。我们现在默认为新应用启用此选项，帮助用户无需额外配置即可获得快速的 React Native 应用启动速度。

Inline Requires 是一个 Babel 转换，将模块导入转换为内联形式。举例来说，Inline Requires 会把模块导入从文件顶部转移到实际使用的位置。

之前的写法：

import {MyFunction} from 'my-module';

const MyComponent = props => {
  const result = MyFunction();

  return <Text>{result}</Text>;
};

转换后的写法：

const MyComponent = props => {
  const result = require('my-module').MyFunction();

  return <Text>{result}</Text>;
};

关于 Inline Requires 的更多信息请参阅 性能文档。

使用 Chrome 查看 Hermes 跟踪​

过去一年，Facebook 赞助了 Major League Hacking 资助项目，支持对 React Native 的贡献。Jessie Nguyen 和 Saphal Patro 贡献了使 Chrome DevTools 的 Performance 标签页能可视化在 Hermes 环境下运行应用的执行情况的功能。

详细信息请查看 新文档页面。

带 Proxy 支持的 Hermes​

我们为 Hermes 添加了 Proxy 支持，使其兼容流行的社区项目，如 react-native-firebase 和 mobx。如果你之前使用了这些包，现在可以迁移到 Hermes。

我们计划在未来版本中让 Hermes 成为 Android 的默认 JavaScript 引擎，因此正在解决用户在使用 Hermes 时碰到的剩余问题。如果还有问题阻碍你的应用采用 Hermes，请在 Hermes GitHub 仓库 提交 issue 反馈。

React 17​

React 17 并未包含面向开发者的新特性或重大破坏性更改。对于 React Native 应用，主要变化是支持了新的 JSX 转换，使文件无需导入 React 即可使用 JSX。

关于 React 17 的更多信息，请参阅 React 博客。

主要依赖版本变更​

• 放弃支持 Android API 16-20。Facebook 应用持续放弃使用量较低的 Android 版本支持。由于 Facebook 应用不再支持这些版本，并且是 React Native 的主要测试环境，React Native 也将放弃支持。
• 需求 Xcode 12 和 CocoaPods 1.10
• Node.js 最低支持版本由 10 升级至 12
• Flipper 升级至 0.75.1

致谢​

感谢数百位贡献者助力 0.64 发布！0.64 变更日志 列出了本次发布包含的全部更改内容。

今天我们发布了 React Native 0.63，默认启用了 LogBox。

LogBox​

我们经常收到社区反馈，指出在 React Native 中错误和警告难以调试。为了解决这些问题，我们全面审视了 React Native 中的错误、警告和日志系统，并从零开始重新设计。

LogBox 是 React Native 中完全重新设计的红框（redbox）、黄框（yellowbox）以及日志体验。在 0.62 版本中，我们引入了 LogBox 作为可选功能。在本次发布中，我们将 LogBox 作为 React Native 的默认体验推出。

LogBox 针对错误和警告过于冗长、格式混乱或无法行动的问题，聚焦于三个主要目标：

• 简洁：日志应提供调试问题所需的最少信息。
• 格式化：日志应格式化以便快速找到所需信息。
• 可操作：日志应是可操作的，以便你能修复问题并继续开发。

为实现这些目标，LogBox 包含：

• 日志通知：警告通知经过重新设计，并增加了对错误的支持，所有 console.warn 和 console.log 消息都会作为通知显示，而不会遮盖你的应用。
• 代码片段：每个错误和警告都包含一个代码片段，显示日志的源代码，直接嵌入应用中，帮助快速定位问题源头。
• 组件堆栈：所有组件堆栈信息从错误消息中剥离，放入单独部分，只显示顶部三个调用帧，这为你提供一个统一、一致的堆栈帧信息区，避免日志信息混乱。
• 堆栈帧折叠：默认情况下，我们折叠与应用代码无关的调用堆栈帧，让你更快看到应用内部问题，而不是筛选 React Native 的内部代码。
• 语法错误格式化：改进了语法错误的格式化，新增带语法高亮的代码片段，便于你看到错误源代码、修复问题，继续开发，避免 React Native 阻碍工作。

我们将这些功能整合到了统一且美观的视觉设计中，错误和警告体验保持一致，且支持翻页浏览所有日志，提升使用愉悦感。

本次变更还将逐步废弃 YellowBox，替换为 LogBox API：

• LogBox.ignoreLogs()：替代了 YellowBox.ignoreLogs([])，用于静默匹配特定字符串或正则表达式的日志。
• LogBox.ignoreAllLogs()：替代了 console.disableYellowBox，用于关闭错误和警告通知。注意：此方法仅关闭通知，未捕获错误仍会弹出全屏 LogBox。

在 0.63 中，使用这些已废弃模块或方法时会有警告。请在 0.64 版本移除前尽早更新代码。

有关 LogBox 和调试 React Native 的更多信息，请参阅文档 这里。

Pressable​

React Native 的设计旨在满足应用程序对平台体验的预期，其中之一是避免“痕迹”——那些能够暴露应用是用 React Native 构建的小细节。其中一大“痕迹”来源是 Touchable 组件：Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback 和 TouchableBounce。这些组件通过允许你为用户交互提供视觉反馈，使应用具备交互性。然而，由于它们内置了与平台交互不匹配的样式和效果，用户能够识别出应用是用 React Native 编写的。

此外，随着 React Native 发展，且对高质量应用的要求提高，这些组件却未能同步演进。React Native 目前支持 Web、桌面和 TV 等多平台，但对于新输入方式的支持不足。React Native 需要在所有平台上支持高质量的交互体验。

为了解决这些问题，我们推出了新的核心组件 Pressable。该组件可检测多种交互类型。其 API 设计允许直接访问当前交互状态，无需父组件手动维护状态。它还设计成可以让各平台扩展其能力，支持悬停（hover）、失焦（blur）、聚焦（focus）等。我们期望大多数开发者会基于 Pressable 构建并共享组件，而不是依赖 TouchableOpacity 等的默认体验。

import {Pressable, Text} from 'react-native';

<Pressable
  onPress={() => {
    console.log('pressed');
  }}
  style={({pressed}) => ({
    backgroundColor: pressed ? 'lightskyblue' : 'white',
  })}>
  <Text style={styles.text}>Press Me!</Text>
</Pressable>;

Pressable 组件的简单示例

你可以从文档了解更多。

原生颜色（PlatformColor、DynamicColorIOS）​

每个原生平台都有系统定义的颜色概念。这些颜色会根据系统主题设置（如浅色或深色模式）、辅助功能设置（如高对比度模式）、乃至于应用上下文（比如视图或窗口的属性）自动响应变化。

虽然可以通过 Appearance API 和/或 AccessibilityInfo 来检测一些这些设置并相应调整样式，但这类抽象开发成本高，且仅仅是对原生颜色外观的近似，特别是在混合应用中，React Native 元素与原生元素并存时，这种差异尤为明显。

React Native 现提供开箱即用的系统颜色支持。PlatformColor() 是一个新 API，可像使用普通颜色一样使用系统颜色。

例如，在 iOS 上，系统提供了名为 labelColor 的颜色，在 React Native 中可用 PlatformColor 使用：

import {Text, PlatformColor} from 'react-native';

<Text style={{color: PlatformColor('labelColor')}}>
  This is a label
</Text>;

把文本颜色设置为 iOS 定义的 labelColor。

相反，Android 提供了如 colorButtonNormal 这样的颜色，你可以这样用：

import {View, Text, PlatformColor} from 'react-native';

<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal'),
  }}>
  <Text>This is colored like a button!</Text>
</View>;

把 View 组件背景色设置为 Android 定义的 colorButtonNormal。

你可以从文档了解更多 PlatformColor。也可以查阅 RNTester 中的示例代码。

DynamicColorIOS 是 iOS 独有的 API，允许你定义在浅色和深色模式下分别使用哪种颜色。与 PlatformColor 类似，DynamicColorIOS 可用于任何需要颜色的地方，它底层使用 iOS 的 colorWithDynamicProvider。

import {Text, DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

<Text style={{color: customDynamicTextColor}}>
  This color changes automatically based on the system theme!
</Text>;

文本颜色会随系统主题自动变化。

你可以从文档了解更多关于 DynamicColorIOS。

停止支持 iOS 9 和 Node.js 8​

发布四年多后，我们停止支持 iOS 9。此变更将帮助我们更快推进开发，减少原生代码中针对各 iOS 版本的兼容性检查。鉴于其市场份额仅为 1%，对你的用户影响应该很小。

同时，我们也不再支持 Node 8。Node 8 的 LTS 支持已于 2019 年 12 月结束。当前 LTS 是 Node 10，且我们以此作为目标版本。如果你仍在用 Node 8 开发 React Native 应用，建议升级以获得最新安全补丁和更新。

其他显著改进​

• 支持在 <Text /> 中渲染 <View /> 而不需要明确设定尺寸：你现在可以在任意 <Text /> 组件内部渲染 <View />，无需显式设置其宽高。此前版本会导致红屏错误。
• iOS LaunchScreen 从 xib 改为 storyboard：自 2020 年 4 月 30 日起，所有提交至 App Store 的应用必须使用 Xcode storyboard 来提供启动画面，且所有 iPhone 应用都必须支持所有 iPhone 屏幕尺寸。本次提交调整了默认 React Native 模板以符合此要求。

致谢​

感谢数百位贡献者帮助实现了 0.63 版本！

查看全部更新，请查看 0.63 版本更新日志。

今天我们发布了 React Native 版本 0.62，默认支持 Flipper。

此次发布正值全球疫情期间。今天发布此版本是为了尊重数百位贡献者的努力，他们使得此次发布成为可能，同时避免版本跟主分支落后太多。请大家理解贡献者在处理问题方面能力受限，如有必要，准备延迟升级。

默认支持 Flipper​

Flipper 是一个用于调试移动端应用的开发者工具。它在 Android 和 iOS 社区中非常流行，在本次发布中，我们为新建和现有的 React Native 应用默认开启了对 Flipper 的支持。

Flipper 开箱即用的功能包括：

• Metro 操作：直接从工具栏重新加载应用并触发开发者菜单。
• 崩溃报告器：查看来自 Android 和 iOS 设备的崩溃报告。
• React DevTools：使用最新版 React DevTools，与其他工具并列使用。
• 网络检查器：查看设备应用发出的所有网络请求。
• Metro 和设备日志：查看、搜索和筛选 Metro 和设备的所有日志。
• 原生布局检查器：查看和编辑 React Native 渲染器输出的原生布局。
• 数据库和偏好设置检查器：查看和编辑设备数据库与偏好设置。

此外，Flipper 作为一个可扩展的平台，提供了一个市场，从 NPM 拉取插件，你可以发布或安装针对自己工作流定制的插件。可用插件请见 这里。

更多信息请查看 Flipper 文档。

新增暗黑模式功能​

我们新增了一个 Appearance 模块，用于访问用户的外观偏好设置，比如他们偏好的配色方案（浅色或暗色）。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 使用暗色配色方案
}

我们还新增了一个钩子，用于订阅用户偏好的状态更新：

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

更多信息请查看文档的 Appearance 和 useColorScheme。

Apple TV 迁移至 react-native-tvos​

作为我们 Lean Core 计划 的一部分，同时为了使 Apple TV 与 React Native Windows、React Native macOS 等其他平台保持一致，我们开始从核心库中移除 Apple TV 相关代码。

今后，React Native 对 Apple TV 的支持将维护在 react-native-community/react-native-tvos 项目中，及对应的 react-native-tvos NPM 包。该仓库是 React Native 主仓库的完整分叉，仅包含支持 Apple TV 所需的变更。

react-native-tvos 的发布将基于公开发布的 React Native 版本。针对此次 0.62 版本，请升级 Apple TV 项目以使用 react-native-tvos 0.62。

更多升级支持​

0.61 版本发布时，社区推出了新的 升级辅助工具，帮助开发者升级 React Native 新版本。升级助手会显示你当前版本到目标版本的差异，便于你了解并应用所需的改动。

即便有此工具，升级时仍会遇到问题。今天我们推出了更多专门的升级支持——Upgrade-Support。Upgrade Support 是专门针对升级项目问题的 GitHub 问题跟踪区，用户可以在这里提交升级相关问题并获得社区帮助。

我们一直致力于改善升级体验，希望这些工具能在我们尚未覆盖的边缘案例中给予用户支持。

其他改进​

• LogBox：我们新增了可选的 LogBox 错误和警告体验；要启用它，请在 index.js 文件中加入 require('react-native').unstable_enableLogBox()。
• React DevTools v4：升级至 最新的 React DevTools，带来显著的性能提升、更好的导航体验及对 React Hooks 的完整支持。
• 无障碍功能改进：我们改进了无障碍功能，包括新增 accessibilityValue、为 Touchables 添加缺失的属性、onSlidingComplete 无障碍事件，并将 Switch 组件的默认角色从 "button" 改为 "switch"。

破坏性变更​

• 移除 PropTypes：为了减少 React Native 核心库对应用体积的影响，并鼓励使用编译时检查的静态类型系统，我们移除了核心组件中的 propTypes。
• 移除 accessibilityStates：我们移除了已废弃的 accessibilityStates 属性，改用新的 accessibilityState 属性，它为组件向辅助功能服务提供状态信息提供了更丰富的语义描述。
• TextInput 改动：移除了不常用、非 W3C 兼容且难以在 Fabric 中实现的 onTextInput 事件支持。同时也删除了未文档化的 inputView 属性和 selectionState。

弃用通知​

• AccessibilityInfo.fetch 已被弃用，本次发布新增了警告提示。
• 设置 useNativeDriver 现在是必需的，以支持未来切换默认值的计划。
• Animated 组件的 ref 现在指向内部组件，并且弃用了 getNode 方法。

致谢​

感谢数百位贡献者的努力，让 0.62 版本成为可能！

欲了解全部更新内容，请查看 0.62 更新日志。

我们很高兴地宣布发布 React Native 0.61，这个版本包含了一个我们称之为快速刷新（Fast Refresh）的全新重载体验。

快速刷新​

当我们询问 React Native 社区有关常见痛点时，最常见的答案之一是“热重载”功能存在问题。它在函数组件中不可靠，常常无法更新屏幕，而且对拼写错误和其他错误不够健壮。我们听到大多数人因为太不靠谱而选择关闭它。

在 React Native 0.61 中，我们将现有的“实时重载”（保存时重载）和“热重载”功能统一成一个名为“快速刷新”的全新功能。快速刷新是从零开始重新实现的，遵循以下原则：

• 快速刷新完全支持现代 React，包括函数组件和 Hooks。
• 快速刷新可以优雅地从拼写错误和其他错误中恢复，必要时会回退到完全重载。
• 快速刷新不进行侵入式代码转换，所以足够可靠，默认打开。

要观看快速刷新的演示视频，请查看：

试试看吧，告诉我们你的想法！如果你愿意，也可以在开发者菜单中关闭它（iOS 上按 Cmd+D，Android 上按 Cmd+M 或 Ctrl+M）。打开和关闭都是即时生效的，所以你随时可以切换。

以下是一些快速刷新的小技巧：

• 快速刷新默认会保留函数组件（包括 Hooks）的 React 本地状态。
• 如果你希望每次编辑都重置 React 状态，可以在该组件文件中添加特殊注释 // @refresh reset。
• 快速刷新始终会重新挂载类组件而不保留状态，以保证其可靠性。
• 我们在代码中难免会犯错！快速刷新会在你保存文件后自动重试渲染，你不需要在修正语法或运行时错误后手动重新加载应用。
• 在编辑过程中添加 console.log 或 debugger 语句是一个很不错的调试技巧。

请在 GitHub 上反馈任何关于快速刷新的问题，我们会进行调查。

其他改进​

• 修复了 use_frameworks! CocoaPods 支持。 在 0.60 版本中，我们对 CocoaPods 集成做了一些更新。不幸的是，这破坏了使用 use_frameworks! 的构建。该问题已在 0.61 中修复，方便需要用动态框架构建的 iOS 项目集成 React Native。
• 新增 useWindowDimensions Hook。 这个新的 Hook 会自动提供并订阅尺寸更新，大多数场景可替代 Dimensions API 使用。
• React 升级至 16.9。 此版本废弃了 UNSAFE_ 生命周期方法的旧名称，改进了 act 的功能等。请参阅 React 16.9 博客 获取自动迁移脚本和更多信息。

破坏性变更​

• 移除 React .xcodeproj 文件。 在 0.60 中，我们引入了通过 CocoaPods 自动链接支持，也将 CocoaPods 集成到了端到端测试中。因此，从现在起，我们采用统一标准方式将 RN 集成到 iOS 应用。这有效地废弃了 React .xcodeproj 文件的支持，该文件从 0.61 开始被移除。注意：如果你已经使用了 0.60 的自动链接功能，不会受到影响。

致谢​

感谢所有为 0.61 版本做出贡献的开发者！

要查看所有更新内容，请查阅 0.61 变更日志。