跳到主要内容

宣布 React Native 0.64 在 iOS 上支持 Hermes

· 阅读需 4 分钟
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack

今天我们发布了 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 NguyenSaphal 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 变更日志 列出了本次发布包含的全部更改内容。

GAAD 承诺 —— 改进 React Native 的无障碍功能

· 阅读需 3 分钟
Alexandra Marlette
Alexandra Marlette
GAAD Pledge Open Source Accessibility Community Manager for React Native

你好,React Native 社区,

2020 年 5 月,Facebook 成为首家签署 GAAD 承诺 的公司,承诺将无障碍作为 React Native 开源项目的核心部分来推进。从那时起,Facebook 花费时间认真审查并记录了 React Native 中的无障碍差距。到目前为止,这些差距分析发现了 90 个问题,全部都已转化为 GitHub issues

总体来看,我们发现 React Native 的 API 在无障碍支持方面表现良好。但同时也发现,许多核心组件尚未充分利用平台的无障碍 API,对某些平台特定功能的支持仍然缺失。

贡献者的热情和多样性一直在 React Native 的发展中发挥着至关重要的作用,这些无障碍差距是当前和新贡献者极好的机会。如果你有兴趣为 React Native 贡献力量,我们鼓励你加入我们,一起让 React Native 更加无障碍。

为了认可贡献者的努力,当一个无障碍问题关闭并附带拉取请求时,贡献者将由我们的社区经理在 Twitter 上获得公开表扬。其拉取请求被接受合入代码库的贡献者,还会在我们每月的 React Native 博客问题更新中被重点介绍。

请加入我们,一起让 React Native 为每个人都更具无障碍性。

你可以如何帮助:

  • 新贡献者应阅读 贡献指南,并浏览 React Native GitHub 上的 46 个 适合初学者的问题

  • 对需要更多投入的问题感兴趣的贡献者,可访问 改进 React Native 无障碍项目页面,查看需要 React Native 知识的 GitHub issues。

  • 有意更新 React Native 文档以反映正在关闭的无障碍差距的技术写手,可以访问 React Native 文档

  • 将此倡议分享给任何可能提供帮助的人!

  • 关注 React Native 的 GAAD 承诺开源无障碍社区经理,Twitter 账号是 Twitter,Facebook 页面是 Facebook,及时了解最新进展。

React Native 文档更新

· 阅读需 4 分钟
Rachel Nabors
Facebook 文档工程师

去年,我们进行了用户访谈并发放了一项调查问卷,以更多地了解人们在何时何地以及如何使用 React Native 文档。基于 24 次访谈和超过 3000 份调查响应的数据和指导意见,我们努力改进 React Native 的文档,今天很高兴与大家分享我们的进展:

非常感谢所有参与访谈、填写调查和文档工作的朋友们!是你们的合作让这一切成为可能。

React Native 团队原则

· 阅读需 5 分钟
Eli White
Eli White
Software Engineer @ Meta

Facebook 的 React Native 团队遵循一些原则,帮助我们确定如何优先处理 React Native 的工作。这些原则专门代表我们的团队,并不一定代表 React Native 社区中的所有利益相关者。我们在此分享这些原则,以便更加透明地说明驱动我们的因素、我们如何做出决策以及我们如何集中精力。

原生体验

我们对 React Native 的首要目标是满足人们对每个平台的期望。这就是为什么 React Native 渲染的是平台原语。我们重视原生的外观和感觉胜过跨平台的一致性。

例如,React Native 中的 TextInput 在 iOS 上渲染为 UITextField。这确保了与密码管理器和键盘控制的开箱即用的集成。通过使用平台原语,React Native 应用也能及时跟进 Android 和 iOS 新版本中的设计和行为变化。

为了匹配原生应用的外观和感觉,我们还必须匹配它们的性能。这是我们投入最雄心勃勃精力的地方。例如,Facebook 创建了 Hermes,一个为 Android 上的 React Native 从零构建的新 JavaScript 引擎。Hermes 显著提升了 React Native 应用的启动时间。我们还在进行主要的架构变动,优化线程模型,使 React Native 更易于与原生代码互操作。

大规模

Facebook 应用中有数百个屏幕是使用 React Native 实现的。Facebook 应用被数十亿人使用,涵盖各种设备。这就是为什么我们投资于规模上最具挑战性的问题。

在我们的应用中部署 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 时,提出了我们的口号“Learn once, write anywhere(学一次,写处处)”——我们的意思是 处处开发者应该能够触及尽可能多的人,而不受限于设备型号或操作系统。

React Native 目标覆盖非常不同的平台,包括移动端、桌面端、网页、电视、虚拟现实、游戏主机等。我们希望在每个平台上实现丰富体验,而不要求开发者只为最低公共标准构建。为此,我们专注于支持每个平台独特的特性。这包括不同的输入机制(如触屏、笔、鼠标)到在虚拟现实中截然不同的三维体验。

这一原则促使我们决定用跨平台的 C++ 实现 React Native 的新核心架构,以促进各平台间的一致性。我们也在完善面向其他平台维护者(如微软 Windows 和 macOS)的公共接口。我们致力于让任何平台支持 React Native。

声明式 UI

我们不认为应该在每个平台部署完全相同的用户界面,我们相信用相同的声明式编程模型展现每个平台独特的能力。我们的声明式编程模型是 React。

在我们的经验中,React 推广的单向数据流让应用更易于理解。我们倾向于将一个屏幕表达为声明式组件的组合,而不是命令式管理视图。React 在 Web 上的成功以及原生 Android 和 iOS 新框架的发展显示,行业也已接受声明式 UI。

React 推广了声明式用户界面。然而,仍有许多未解问题,而 React 处于解决这些问题的独特位置。React Native 将继续基于 React 的创新,并保持在声明式用户界面运动的前沿。

宣布发布 React Native 0.63 及 LogBox

· 阅读需 7 分钟
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack

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

LogBox

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

LogBox 截图

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 组件:ButtonTouchableWithoutFeedbackTouchableHighlightTouchableOpacityTouchableNativeFeedbackTouchableBounce。这些组件通过允许你为用户交互提供视觉反馈,使应用具备交互性。然而,由于它们内置了与平台交互不匹配的样式和效果,用户能够识别出应用是用 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 版本!

备注

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

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

宣布发布支持 Flipper 的 React Native 0.62 版本

· 阅读需 5 分钟
Rick Hanlon
Facebook React Native 核心团队成员

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

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

默认支持 Flipper

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

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

更多信息请查看文档的 AppearanceuseColorScheme

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

认识 Doctor —— 一个新的 React Native 命令

· 阅读需 2 分钟
Lucas Bento
React Native 社区

在 React Native 社区 6 位贡献者提交了 20 多个拉取请求后,我们很高兴推出 react-native doctor,这是一个新命令,旨在帮助你开始使用、排查问题并自动修复开发环境中的错误。doctor 命令的设计灵感主要来源于 ExpoHomebrew 自带的 doctor 命令,同时 UI 上借鉴了 Jest 的风格。

宣布发布带有快速刷新功能的 React Native 0.61

· 阅读需 4 分钟
Dan Abramov
Facebook React 核心成员

我们很高兴地宣布发布 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.logdebugger 语句是一个很不错的调试技巧。

请在 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 变更日志

认识 Hermes,一款为 React Native 优化的新型 JavaScript 引擎

· 阅读需 2 分钟
Rachel Nabors
Facebook 文档工程师

上周在 Chain React 大会上,我们宣布了 Hermes,这是一款我们在 Facebook 研发的开源 JavaScript 引擎。它是一款小巧轻量、为在 Android 上运行 React Native 优化的 JavaScript 引擎。快来看看吧!

Hermes 通过降低内存占用、减少下载大小,以及缩短应用可用时间或“交互时间”(TTI),提升了 React Native 的性能。

“在分析性能数据时,我们注意到 JavaScript 引擎本身是启动性能和下载大小的重要因素。基于这些数据,我们知道必须优化 JavaScript 性能,以适应手机这种更受限的环境,相较于台式机或笔记本电脑。在探索过其他选项后,我们构建了一个我们称之为 Hermes 的新 JavaScript 引擎。它设计用来提升应用性能,重点关注我们的 React Native 应用,即使是在内存有限、存储速度较慢且计算能力受限的主流设备上。” —Hermes:一款为移动应用优化的开源 JavaScript 引擎,起步于 React Native

想要立即开始使用?务必查看文档中的新手指南,了解如何在现有 React Native 应用中启用 Hermes

Hermes 和 React Native 标志合并成带翼的烈焰,在孤独发光的安卓手机上方,闪电风暴中腾飞的插画。 插画作者:Rachel Nabors

宣布 React Native 0.60 发布

· 阅读需 5 分钟
Ryan Turner
核心维护者 & React Native 开发者

经过数百名贡献者数月的辛勤工作,React Native 核心团队自豪地宣布发布 0.60 版本。本次发布涵盖了 Android 和 iOS 平台的重要迁移,同时也修复了许多问题。本文将介绍本次发布的亮点。当然,请务必查阅更新日志以获取更详细的信息。最后,感谢所有贡献者帮助我们达成这一里程碑!

关注无障碍功能

无障碍 API 进行了许多改进,比如 announceForAccessibility,以及对 rolesaction supportflags 等的提升。无障碍是一门复杂的学问,但我们希望这些改进能让无障碍支持变得更容易。详情请务必查看 React Native 开源更新 2019 年 6 月

崭新的起点

React Native 的启动界面进行了更新!感谢众多贡献者帮助设计了新的界面。这个新的 “Hello World” 将以更友好、更吸引人的方式迎接用户进入生态系统。

新的初始化界面帮助开发者从一开始就利用资源和良好的示例快速入门

支持 AndroidX

AndroidX 是 Android 生态系统的一大进步,旧的支持库组件正在被弃用。在 0.60 版本,React Native 已经迁移至 AndroidX。这是一个破坏性变更,您的原生代码和依赖也需要进行迁移

由于此变更,React Native 应用必须开始使用 AndroidX。两者无法在同一应用中并行使用,因此应用的所有代码和依赖都必须统一使用其一。

来自 matt-oakesdiscussions-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! 存在兼容性问题,相关 issue 正在跟踪并提供变通方案和未来补丁。

精简核心模块移除

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 团队引入了对原生模块链接的重大改进,称为 自动链接(autolinking)!多数场景下,您不再需要使用 react-native link。同时,整体链接流程也得到了重新设计。请务必照文档所述先执行对现有依赖的 react-native unlink

升级助手

@lucasbento@pvinis@kelset@watadarkstar 开发了一个极好的工具——Upgrade Helper,简化升级过程。它帮助 React Native 用户(尤其是已有底层项目或复杂定制的用户)清晰查看版本间的变更。请查看 更新的升级文档,并尝试使用该工具规划您的升级路径!

升级助手干净利落地展示了迁移到不同 React Native 版本所需的变更

致库维护者的一些提醒

AndroidX 相关变更几乎肯定需要更新您的库,请尽快支持。如果您还无法升级,建议使用 jetifier 检查您的库,确保用户能在构建时对您的库进行修补。

请查看 自动链接文档 以更新配置和 README。根据您的库之前的集成方式,您可能还需做额外调整。CLI 的依赖 指南提供了关于如何定义依赖接口的信息。

感谢

以上是我们记录到的主要亮点,当然还有许多值得期待的更新。查看全部更新请访问 更新日志。一如既往,请关注更多新闻。祝您愉快地使用 0.60 版本!