跳至主内容

发布 React Native 0.64:支持 iOS 平台的 Hermes 引擎

· 1 分钟阅读
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

今天我们正式发布 React Native 0.64 版本,此版本新增了对 iOS 平台 Hermes 引擎的支持。

iOS 平台的 Hermes 可选启用

Hermes 是一款专为 React Native 优化的开源 JavaScript 引擎。它通过降低内存占用、减小下载体积并缩短应用可用时间(即"交互就绪时间"/TTI)来提升性能。

本次发布后,您现在也可以在 iOS 开发中使用 Hermes。只需在 Podfile 中将 hermes_enabled 设为 true 并运行 pod install 即可启用。

use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)

请注意:iOS 平台的 Hermes 支持仍处于早期阶段。我们将保持其作为可选功能,同时进行更深入的基准测试。欢迎您在自己的应用中尝试,并反馈使用效果!

默认启用内联引用 (Inline Requires)

内联引用是 Metro 的一项配置选项,通过延迟执行 JavaScript 模块直到实际使用时(而非启动时)来提升应用启动速度。

该功能作为可选配置项已存在多年,并在文档的性能章节中推荐使用。现在我们将默认启用此选项,帮助开发者无需额外配置即可获得更快的 React Native 应用启动体验。

内联引用是 Babel 的一项转换功能,将模块导入语句转换为内联形式。例如,它会把模块导入调用从文件顶部移动到实际使用位置。

转换前:

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>;
};

更多关于内联引用的信息请参阅性能文档

使用 Chrome 查看 Hermes 性能轨迹

过去一年 Facebook 赞助了 Major League Hacking 奖学金计划,支持对 React Native 的贡献。Jessie NguyenSaphal Patro 新增了在 Chrome DevTools 性能面板中可视化 Hermes 应用执行情况的功能。

详情请查看新版文档页面

支持 Proxy 的 Hermes 引擎

我们已为 Hermes 添加 Proxy 支持,使其兼容 react-native-firebase 和 mobx 等热门社区项目。如果您正在使用这些包,现在可以将项目迁移至 Hermes。

我们计划在后续版本中将 Hermes 设为 Android 平台的默认 JavaScript 引擎,目前正在解决用户使用中的遗留问题。如果您的应用在采用 Hermes 时遇到阻碍,请在 Hermes GitHub 仓库提交 issue。

React 17 支持

React 17 没有面向开发者的新功能或重大破坏性变更。对 React Native 应用的主要影响是新的 JSX 转换,使文件无需导入 React 即可使用 JSX。

更多 React 17 信息详见 React 官方博客

主要依赖版本变更

  • 停止支持 Android API 16-20 级别。由于 Facebook 应用已停止支持用户量过低的 Android 版本,且该应用是 React Native 的主要测试平台,React Native 将同步停止支持这些版本。

  • 需要 Xcode 12 和 CocoaPods 1.10

  • 最低 Node 支持版本从 10 升级至 12

  • Flipper 升级至 0.75.1

致谢

衷心感谢数百位贡献者共同成就 0.64 版本!您可以在 0.64 版本变更日志 中查看本次发布的所有更新内容。

GAAD 承诺——提升 React Native 的无障碍功能

· 1 分钟阅读
Alexandra Marlette
Alexandra Marlette
GAAD Pledge Open Source Accessibility Community Manager for React Native
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

你好,React Native 社区:

2020 年 5 月,Facebook 是第一家作出 GAAD 承诺 的公司,此举意味着他们将无障碍功能确立为 React Native 开源项目的核心部分。自五月起,Facebook 团队持续系统地审查并记录了 React Native 中的无障碍功能缺陷。截至目前,差距分析已发现 90 个问题,所有问题均已转化为 GitHub 议题

总体而言,我们发现 React Native API 对无障碍功能提供了强有力的支持。然而,许多核心组件尚未充分利用平台的无障碍 API,并且某些平台特定功能的支持仍存在缺失。

贡献者的热情和多样性始终是 React Native 发展的关键动力,这些无障碍功能的缺陷正是现有贡献者和新贡献者的大好机会。如果您一直有意为 React Native 贡献力量,我们诚邀您加入我们,共同提升 React Native 的无障碍体验。

为表彰贡献者的付出:当无障碍议题通过拉取请求解决后,贡献者将获得社区经理在 Twitter 上的公开致谢;代码库接受的拉取请求作者,将出现在 React Native 博客的每月议题更新中。

请加入我们,共同让 React Native 对每个人更加无障碍。

参与方式:

React Native 文档更新

· 1 分钟阅读
Rachel Nabors
Facebook 文档工程师
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

去年我们进行了用户访谈并发布了一份调查问卷,深入了解开发者使用 React Native 文档的方式和场景。基于 24 场访谈和 3000 多份问卷反馈的数据与洞见,我们成功优化了 React Native 的文档体系,并很高兴在此分享最新进展:

衷心感谢所有参与访谈、问卷调查以及文档改进工作的伙伴!正是大家的通力协作让这一切成为可能。

React Native 团队核心原则

· 1 分钟阅读
Eli White
Eli White
Software Engineer @ Meta
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

Facebook 的 React Native 团队遵循一系列指导原则来决定我们工作的优先级。这些原则代表我们团队自身的立场,并不必然反映 React Native 生态中所有参与者的观点。我们在此分享这些原则,旨在更透明地展示我们的驱动力、决策依据以及工作重心。

原生体验优先

React Native 的首要目标是满足用户对各平台的体验预期。正因如此,React Native 直接渲染为平台原生组件。相较于跨平台一致性,我们更重视原生观感和操作体验。

例如,React Native 的 TextInput 在 iOS 上会渲染为 UITextField 组件。这确保了与密码管理器和键盘控制功能的无缝集成。通过使用平台原生组件,React Native 应用还能自动适配 Android 和 iOS 新版本的设计与行为变更。

要实现原生应用的观感与体验,性能也必须与之匹配。这正是我们投入最多雄心的领域。例如 Facebook 专门为 Android 版 React Native 开发了 Hermes 引擎,这个从零构建的 JavaScript 引擎显著提升了应用启动速度。同时我们还在推进重大架构改进,优化线程模型并增强与原生代码的互操作性。

海量规模支撑

Facebook 应用中有数百个界面由 React Native 实现,这个应用被数十亿用户通过各类设备访问。正因如此,我们专注于解决大规模场景下的极端挑战。

在自身产品中部署 React Native 使我们能发现小规模场景无法暴露的问题。例如 Facebook 着力优化从最新 iPhone 到多代旧款 Android 设备的全频谱性能表现。这种专注驱动了 Hermes、Fabric 和 TurboModules 等架构级项目。

我们已证明 React Native 同样适用于超大型组织。当数百名开发者协作开发同一应用时,渐进式采用成为刚需。为此我们确保 React Native 支持逐屏迁移。很快还将进一步实现:将现有原生界面中的单个视图迁移到 React Native。

对海量规模的专注意味着我们暂不涉足某些领域。例如团队不主导行业推广 React Native,也不会主动解决小规模场景未暴露的问题。值得自豪的是,我们拥有众多合作伙伴与核心贡献者,他们正致力于解决社区关注的这些重要领域。

开发效能提升

卓越的用户体验源自持续迭代。代码变更应能在数秒内呈现在运行中的应用中。React Native 的架构使其能在开发过程中提供近乎实时的反馈。

众多团队反馈采用 React Native 后开发效能显著提升。即时反馈机制让尝试新创意和打磨细节变得轻松——开发者无需因微小改动中断编码流程。我们在改进 React Native 时始终确保保留这一核心开发体验。

即时反馈并非 React Native 提升效能的唯一途径。团队可利用快速增长的高质量开源生态,还能在 Android、iOS 和 Web 平台间共享业务逻辑。这加速了版本迭代,并消除了跨平台团队间的协作壁垒。

全平台覆盖

2014 年推出 React Native 时,我们提出"学习一次,编写任何平台"的愿景——这里的"任何平台"具有字面意义。开发者应能触达最广泛的用户群体,不受设备型号或操作系统的限制。

React Native 的目标平台非常多样化,涵盖移动设备、桌面端、网页、电视、VR、游戏主机等。我们致力于让每个平台都能提供丰富的体验,而不是要求开发者按照最低标准进行构建。为此,我们专注于支持各平台的独特功能——从多样化的输入方式(如触控、手写笔、鼠标)到 VR 中的 3D 环境等根本性差异化的交互体验。

这一原则促使我们决定使用跨平台的 C++ 实现 React Native 的新核心架构,以提升多平台一致性。同时,我们正在为 Windows 和 macOS 等平台维护者(如微软)优化公共接口,力求让任何平台都能支持 React Native。

声明式用户界面

我们不追求在每个平台部署完全相同的用户界面,而是主张通过相同的声明式编程模型来展现每个平台的独特功能。我们的声明式编程模型就是 React。

实践证明,React 推广的单向数据流能让应用更易于理解。我们更倾向于将界面视为声明式组件的组合,而非命令式管理的视图。React 在 Web 领域的成功,以及新版原生 Android 和 iOS 框架的发展方向,都表明行业同样拥抱了声明式 UI。

React 引领了声明式用户界面的潮流,但仍有诸多未解难题需要 React 发挥独特优势。React Native 将持续构建在 React 的创新之上,保持在声明式用户界面运动的前沿。

发布 React Native 0.63:默认启用 LogBox

· 1 分钟阅读
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

今天我们发布 React Native 0.63,该版本默认启用 LogBox。

LogBox

我们常收到社区反馈,表示在 React Native 中调试错误和警告非常困难。为解决这些问题,我们全面审查了错误/警告/日志系统,并彻底重构了这套机制。

LogBox 截图

LogBox 是对 React Native 中错误提示(redbox)、警告提示(yellowbox)和日志体验的全面革新。0.62 版本中我们以可选功能引入 LogBox,本次更新则将其设为所有 React Native 应用的默认体验。

LogBox 针对错误警告信息冗长、格式混乱、缺乏操作指引等痛点,聚焦三大核心目标:

  • 简洁性:日志应仅提供调试所需的最精简信息。

  • 格式化:日志应结构清晰,便于快速定位关键信息。

  • 可操作性:日志应提供明确指引,助您高效解决问题。

为实现这些目标,LogBox 包含以下特性:

  • 日志通知:重新设计警告通知并支持错误提示,所有 console.warn 和 console.log 消息将以通知形式展示,不再遮挡应用界面。

  • 代码框架:每个错误/警告都附带代码框架,直接在应用中显示日志对应源码,助您快速定位问题根源。

  • 组件调用栈:组件调用栈现从错误信息中剥离,独立展示前三个关键帧,提供整洁统一的堆栈信息查看空间。

  • 调用栈折叠:默认折叠与应用程序无关的底层调用栈,避免 React Native 内部代码干扰问题排查。

  • 语法错误格式化:优化语法错误格式,新增带语法高亮的代码框架,助您直观识别错误来源并快速修复。

这些功能均融入全新的视觉设计,实现错误/警告样式统一,并通过直观的分页界面提供流畅的日志浏览体验。

此次变更后,我们将弃用 YellowBox 并推荐使用 LogBox API:

  • LogBox.ignoreLogs():替代 YellowBox.ignoreLogs([]),通过字符串或正则表达式过滤指定日志。

  • LogBox.ignoreAllLogs():替代 console.disableYellowBox,用于关闭错误/警告通知(注意:仅禁用通知功能,未捕获的错误仍会触发全屏 LogBox)。

在 0.63 版本中使用已弃用模块/方法时将收到警告提示,请务必在 0.64 版本移除这些 API 前完成调用点迁移。

有关 LogBox 及 React Native 调试的更多信息,请参阅文档

Pressable

React Native 的构建目标在于让应用满足用户对平台的期待。这包括避免出现 "破绽"——那些暴露应用由 React Native 构建的小细节。可触摸组件一直是这类破绽的主要来源:ButtonTouchableWithoutFeedbackTouchableHighlightTouchableOpacityTouchableNativeFeedbackTouchableBounce。这些组件通过提供视觉反馈使应用具有交互性,但其内置样式和效果与平台原生交互不符,用户能轻易识别出 React Native 构建的体验。

随着 React Native 的发展和对高质量应用要求的提升,这些组件未能同步进化。当前 React Native 已支持 Web、桌面和 TV 等平台,但对额外输入模式的支持依然不足。我们需要在所有平台上提供高品质的交互体验。

为解决这些问题,我们推出了名为 Pressable 的新核心组件。该组件可检测多种交互类型,其 API 设计让开发者能直接获取当前交互状态,无需在父组件中手动维护状态。同时它支持平台扩展能力(如悬停、失焦、聚焦等)。我们预期开发者将基于 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>;

A simple example of a Pressable component in action

您可通过文档了解更多信息。

原生色彩支持 (PlatformColor, DynamicColorIOS)

每个原生平台都有系统定义颜色的概念。这些颜色能自动响应系统主题设置(如浅色/深色模式)、辅助功能设置(如高对比度模式),甚至应用内的上下文环境(如容器视图特性)。

虽然可通过 AppearanceAccessibilityInfo API 检测部分设置并调整样式,但这类抽象方案开发成本高且只能近似原生色彩效果。在混合应用中,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>;

Sets the color of the Text component to labelColor as defined by iOS.

Android 则提供类似 colorButtonNormal 的色彩,调用方式如下:

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

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

Sets the background color of the View component to colorButtonNormal as defined by Android.

更多 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>;

Changes the text color based on the system theme

DynamicColorIOS 详细用法参见文档

停止支持 iOS 9 和 Node.js 8

在 iOS 9 发布四年多后,我们将停止对其支持。此举能减少原生代码中的兼容性检查逻辑,加快开发进程。根据iOS 9 当前 1% 的市场占有率,此举对用户影响甚微。

同时,我们已停止对 Node 8 的支持。其 LTS 维护周期已于 2019 年 12 月结束。当前 LTS 版本为 Node 10,这也是我们当前支持的目标版本。如果您仍在开发 React Native 应用时使用 Node 8,我们强烈建议升级版本,以获取所有最新的安全修复和功能更新。

其他重要改进

  • 支持在 <Text /> 中直接渲染 <View /> 无需显式尺寸:现在您可以在任意 <Text /> 组件内渲染 <View /> 而无需显式设置宽高,这在之前版本中并不总是可行。在早期 React Native 版本中,此类操作会导致 RedBox 错误提示。

  • iOS 启动屏由 xib 切换至 storyboard:自 2020 年 4 月 30 日起,提交至 App Store 的所有应用必须使用 Xcode storyboard 提供启动屏幕,且所有 iPhone 应用必须适配全系屏幕尺寸。本次更新已调整默认 React Native 模板以满足该要求。

致谢

感谢数百位贡献者共同促成 React Native 0.63 的发布!

备注

特别感谢 Rick Hanlon 撰写本文的 LogBox 部分,以及 Eli White 撰写 Pressable 相关内容。

完整更新日志请查看 0.63 变更记录

React Native 0.62 发布:默认集成 Flipper

· 1 分钟阅读
Rick Hanlon
Facebook React Native 核心成员
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

今天我们正式发布 React Native 0.62 版本,该版本默认集成了 Flipper 支持。

本次发布正值全球疫情期间。我们选择此刻发布是为了尊重数百位贡献者为本版本付出的努力,并避免版本与主分支差距过大。请注意当前贡献者处理问题的能力有所下降,如有必要请酌情延迟升级计划。

默认集成 Flipper

Flipper 是一款用于调试移动应用的开发者工具,在 Android 和 iOS 社区广受欢迎。本次更新中,我们为新建和现有 React Native 应用默认启用了该工具支持。

React Native 的 Flipper 界面截图

Flipper 默认提供以下功能:

  • Metro 操作:通过工具栏直接重载应用并触发开发者菜单

  • 崩溃报告:查看来自 Android 和 iOS 设备的崩溃日志

  • React 开发者工具:在统一界面中使用最新版 React DevTools

  • 网络检查器:查看设备应用发起的全部网络请求

  • Metro 与设备日志:查看、搜索并筛选来自 Metro 和设备的全部日志

  • 原生布局检查器:查看并编辑 React Native 渲染器输出的原生布局

  • 数据库与偏好设置检查器:查看并编辑设备数据库和偏好设置

此外,Flipper 作为可扩展平台,提供了从 NPM 获取插件的市场机制,您可发布或安装符合特定工作流程的自定义插件。查看可用插件列表

更多信息请参阅 Flipper 官方文档

全新深色模式功能

我们新增了 Appearance 模块,用于获取用户的外观偏好设置(如首选配色方案为浅色或深色模式)。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark color scheme
}

同时新增了监听用户偏好设置变更的钩子函数:

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

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

详见 AppearanceuseColorScheme 文档。

Apple TV 迁移至 react-native-tvos

作为精简核心计划的一部分,同时为统一 Apple TV 与 React Native Windows/macOS 等平台的支持方式,我们已开始从核心代码库移除 Apple TV 专属代码。

未来 React Native 对 Apple TV 的支持将转由 react-native-community/react-native-tvos 仓库维护,并同步提供 react-native-tvos NPM 包。这是主代码库的完整分支,仅包含支持 Apple TV 的必要修改。

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

增强升级支持

当 0.61 版本发布时,社区推出了全新的升级助手工具,帮助开发者升级 React Native 版本。该工具可展示从当前版本到目标版本的差异对比,明确升级所需的具体修改。

即便使用此工具,升级过程中仍可能遇到问题。今天我们宣布推出升级支持中心,提供更专注的升级支持。该 GitHub issue 跟踪系统专用于处理项目升级相关问题,开发者可在此获取社区帮助。

我们始终致力于优化升级体验,希望这些工具能为尚未覆盖的特殊场景提供必要支持。

其他改进

  • LogBox:新增的错误与警告体验现作为可选功能提供,需在 index.js 中添加 require('react-native').unstable_enableLogBox() 启用

  • React DevTools v4:升级至最新版 React DevTools,显著提升性能,优化导航体验,并完整支持 React Hooks

  • 无障碍改进:包括新增 accessibilityValueTouchables 缺失属性、onSlidingComplete 无障碍事件支持,并将 Switch 组件的默认角色由 "button" 改为 "switch"

重大变更

  • 移除 PropTypes:为减少 React Native 核心对应用体积的影响,并推荐使用编译时检查的静态类型系统,我们移除了核心组件中的 propTypes

  • 移除 accessibilityStates移除已废弃的 accessibilityStates 属性,改用语义更丰富的 accessibilityState 属性向无障碍服务描述组件状态信息

  • TextInput 变更:因使用率低、不符合 W3C 标准且在 Fabric 中实现困难,移除了 TextInput 的 onTextInput。同时移除了未文档化的 inputView 属性和 selectionState

弃用项

  • AccessibilityInfo.fetch 此前已弃用,本次更新添加了警告提示

  • 现在必须显式设置 useNativeDriver 以支持未来默认值切换,详见

  • Animated 组件的 ref 现指向内部组件,已弃用 getNode 方法

致谢

衷心感谢数百位贡献者让 0.62 版本成为可能!

要查看所有更新内容,请查阅 0.62 更新日志

认识 Doctor:React Native 的全新命令

· 1 分钟阅读
Lucas Bento
React Native 社区
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

在 React Native 社区 6 位贡献者提交了超过 20 个拉取请求后,我们兴奋地推出 react-native doctor 命令。这个新工具将帮助您快速上手开发、排查问题,并自动修复开发环境中的错误。doctor 命令的灵感主要来自 ExpoHomebrew 的 doctor 命令,同时其用户界面也借鉴了 Jest 的设计理念。

宣布推出 React Native 0.61 并带来 Fast Refresh 功能

· 1 分钟阅读
Dan Abramov
Facebook React 核心团队
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

我们很高兴地宣布 React Native 0.61 版本,它包含了一种全新的重载体验——我们称之为 Fast Refresh。

Fast Refresh

当我们向 React Native 社区征询常见痛点时,最突出的反馈之一是“热重载”(hot reloading)功能存在问题。它在函数组件上工作不可靠,经常无法更新屏幕,并且对拼写错误和其他错误不够健壮。我们了解到大多数人因为它太不可靠而选择关闭。

在 React Native 0.61 中,我们将现有的“实时重载”(保存时重载)和“热重载”功能统一为全新的“Fast Refresh”特性。Fast Refresh 从零开始构建,遵循以下核心原则:

  • Fast Refresh 全面支持现代 React,包括函数组件和 Hooks

  • Fast Refresh 能优雅地从拼写错误中恢复,并在必要时回退到完整重载

  • Fast Refresh 不会执行侵入式代码转换,因此足够可靠可作为默认选项

要查看 Fast Refresh 的实际效果,请观看以下演示视频:

欢迎您亲自尝试并分享使用感受!如果不需要该功能,可以在开发者菜单中关闭(iOS 按 Cmd+D,Android 按 Cmd+M 或 Ctrl+M)。开启/关闭操作即时生效,您可以随时调整。

以下是 Fast Refresh 的使用技巧:

  • 默认情况下,Fast Refresh 会保留函数组件(及 Hooks!)的本地状态

  • 若需在每次编辑时重置 React 状态,可在组件文件中添加特殊注释 // @refresh reset

  • Fast Refresh 总会重新挂载类组件且不保留状态,这确保了功能可靠性

  • 代码出错在所难免!Fast Refresh 会在保存文件后自动重试渲染。修复语法或运行时错误后,无需手动重载应用

  • 在编辑过程中添加 console.logdebugger 语句是高效的调试技巧

如在 Fast Refresh 中发现任何问题,请至 GitHub 提交报告,我们将及时跟进

其他改进

  • 修复了 use_frameworks! 的 CocoaPods 支持。0.60 版本默认集成 CocoaPods 的改动导致使用 use_frameworks! 的构建失败。该问题已在 0.61 修复,使 React Native 更易集成到需要动态框架的 iOS 项目中

  • 新增 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 更新日志

认识 Hermes:专为 React Native 优化的全新 JavaScript 引擎

· 1 分钟阅读
Rachel Nabors
Facebook 文档工程师
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

上周在 Chain React 大会上,我们正式发布了 Hermes —— 这是 Facebook 团队开发的开源 JavaScript 引擎。这款轻巧紧凑的引擎专门针对 Android 平台的 React Native 运行环境进行了深度优化。立即了解详情!

Hermes 通过降低内存占用、缩小下载体积、缩短应用启动到可交互状态的时间(TTI)来全面提升 React Native 的性能表现。

“性能分析数据显示,JavaScript 引擎本身对启动速度和安装包体积有显著影响。基于这些发现,我们意识到必须在移动设备这种比桌面/笔记本更受限的环境中优化 JavaScript 性能。经过多方探索,最终我们构建了名为 Hermes 的全新 JavaScript 引擎。它专门为提升移动应用性能而设计,尤其专注于优化 React Native 应用在内存有限、存储较慢、算力不足的大众市场设备上的表现。” —Hermes:专为移动应用优化的开源 JavaScript 引擎,从 React Native 开始

想立即开始体验?别忘了查阅文档中的全新指南:在现有 React Native 应用中启用 Hermes

插画:Hermes 与 React Native 的徽标融合成带翼的复仇女神形象,从一台孤悬发光的 Android 手机中腾空而起,背景是电闪雷鸣的风暴场景。 插画作者:Rachel Nabors

React Native 0.60 正式发布

· 1 分钟阅读
Ryan Turner
核心维护者 & React Native 开发者
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

经过数百名贡献者数月的辛勤工作,React Native 核心团队自豪地宣布发布 0.60 版本。此版本完成了 Android 和 iOS 平台的重要迁移,并修复了许多问题。这篇博客文章将介绍此次发布的亮点。不过,一如既往,更详细的信息请参考更新日志。最后,感谢贡献者帮助我们实现这一里程碑!

聚焦无障碍功能

我们对无障碍 API 进行了诸多改进,例如 announceForAccessibility,以及 角色操作支持标志 等方面的优化。无障碍是一门复杂的科学,但我们希望这些改进能让无障碍开发变得更轻松一些。请务必查看 2019年6月React Native开源更新 了解这些更改的更多细节。

全新的开始

React Native 的启动界面已焕然一新!感谢众多贡献者协助创建了新的用户界面。这个全新的"Hello World"将以更友好、更吸引人的方式欢迎用户加入生态系统。

新的初始化界面帮助开发者从一开始就能获得资源和良好示例

AndroidX 支持

AndroidX 是 Android 生态系统向前迈出的重要一步,旧的支持库构件正在被弃用。在 0.60 版本中,React Native 已迁移至 AndroidX。这是一项重大变更,您的原生代码和依赖项也需要进行迁移

在此变更之后,React Native 应用需要开始自行使用 AndroidX。它们不能在一个应用中并存,因此所有应用代码和依赖代码都必须使用其中之一。

matt-oakes 发表于 discussions-and-proposals

虽然您需要自行迁移原生代码,但 @mikehardy@cawfree@m4tt72 开发了名为"jetifier"的智能工具来修补您的 node_modules。库维护者需要进行升级,但此工具可为您提供临时解决方案,同时给他们时间发布 AndroidX 版本。因此,如果您遇到与 AndroidX 迁移相关的错误,不妨试试这个工具。

默认使用 CocoaPods

CocoaPods 现已集成到 React Native 的 iOS 项目中。如果你尚未使用,请确保从现在开始使用 xcworkspace 文件打开 iOS 平台代码(小技巧:可在项目根目录尝试 xed ios 命令)。同时,内部包的 podspec 配置已更新以确保与 Xcode 项目兼容,这将有助于故障排查和调试。在升级到 0.60 版本时,你需要对 Podfile 进行一些简单修改来启用这项重要功能。请注意,我们已知晓与 use_frameworks! 的兼容性问题,正在通过此工单追踪临时解决方案和后续补丁。

精简核心模块移除

WebViewNetInfo 此前已被提取到独立代码库,在 0.60 版本中我们已完成将其移出 React Native 主仓库的工作。此外,为响应社区关于新 App Store 政策的反馈,Geolocation 模块也已被提取。若你尚未迁移,请添加 react-native-webview@react-native-community/netinfo@react-native-community/geolocation 依赖项完成迁移。如需自动化解决方案,可考虑使用 rn-upgrade-deprecated-modules。维护者们在模块提取后已向这些仓库提交了 100 多次提交,我们对社区的大力支持感到欣喜!

原生模块自动链接

React Native CLI 团队推出了名为自动链接的重大改进!多数场景下不再需要手动执行 react-native link 命令。同时团队全面重构了链接流程,请根据上述文档使用 react-native unlink 移除现有依赖。

升级助手

@lucasbento@pvinis@kelset@watadarkstar 开发了强大的 Upgrade Helper 工具来简化升级流程。它帮助具有遗留应用或复杂定制需求的 React Native 用户清晰查看版本间的变更差异。请查阅更新后的升级文档,立即体验你的专属升级路径!

升级助手清晰展示迁移到不同 React Native 版本所需的更改

致库维护者

AndroidX 的变更几乎必然要求更新你的库,请尽快添加支持。若暂时无法升级,建议使用 jetifier 工具测试你的库,确保用户能在构建时成功打补丁。

请查阅自动链接文档更新配置和说明文档。根据库的原有集成方式,你可能还需进行额外调整。参考 CLI 的依赖管理指南了解如何定义依赖接口。

致谢

虽然我们重点介绍了这些亮点,但仍有更多令人振奋的改进。要查看所有更新内容,请参阅完整的变更日志。请持续关注后续消息,尽情享受 0.60 版本吧!