跳到主要内容

GAAD 承诺 - 一年后

·4 分钟阅读
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承诺开源无障碍功能社区经理

自 Facebook 做出 GAAD 承诺 使 React Native 具有无障碍功能以来已有一年,该项目超出了我们的预期。我们很高兴地宣布,该项目将在 2021 年继续进行,并希望向大家更新我们迄今为止的进展。在去年对 React Native 中的无障碍功能差距进行全面分析之后,开始着手填补这些差距。

我们从 90 个未解决的差距分析问题开始,从 2021 年 3 月项目在 GitHub 上启动至今

  • 社区已关闭 11 个问题。

  • React Native 团队已评估并关闭 19 个问题。

  • 已合并 9 个拉取请求。

  • 已将 1 个拉取请求合并到 React Native 文档中。

我们要感谢 React Native 社区在过去一年中为实现更易访问的 React Native 所做的重大进展。每位贡献者的努力都在为改进 React Native 无障碍功能做出贡献。

GAAD 承诺 - 三月份无障碍功能问题更新

·3 分钟阅读
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承诺开源无障碍功能社区经理

自从我们向 GitHub 社区发布经过全面审查的差距分析和问题列表以改进 React Native 的无障碍功能以来,已经过去了四个星期。在 React Native 社区的帮助下,我们在改进无障碍功能方面已经取得了很大的进展。社区成员一直在帮助贡献者、审查测试并关注先前的无障碍功能问题。自 3 月 8 日以来,社区已关闭六个问题,并提交了四个拉取请求,另有七个拉取请求正在审查中。

在这项工作继续进行的同时,Facebook 的 React Native 和无障碍功能团队正在评估在此倡议之前提交的无障碍功能错误和问题,以确定它们是否已包含在我们当前的差距分析中,或者是否存在需要纳入项目中的其他问题。已发现一个新问题并将其移至项目中,其他四个问题直接映射到现有问题,还有两个问题有望通过解决现有问题来解决,这些问题解决了其问题的根本原因。

感谢所有参与的社区成员。你们真正在推动 React Native 为所有人提供更好的无障碍功能!

React Native 0.64 发布公告,iOS 版 Hermes

·4 分钟阅读
Mike Grabowski
Mike Grabowski
Callstack 首席技术官兼联合创始人

今天,我们发布了 React Native 0.64,它附带了对 iOS 上 Hermes 的支持。

iOS 上可选择启用 Hermes

Hermes 是一个开源 JavaScript 引擎,针对运行 React Native 进行了优化。它通过减少内存使用率、缩小下载大小以及缩短应用变得可用或“可交互时间”(TTI)的时间来提高性能。

在此版本中,我们很高兴地宣布您现在也可以使用 Hermes 在 iOS 上进行构建。要在 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 支持仍处于早期阶段。我们将其保留为可选择启用,因为我们正在进行进一步的基准测试。我们鼓励您在自己的应用程序上尝试它,并告诉我们它的运行情况!

默认启用内联 require

内联 require 是一种 Metro 配置选项,它通过延迟 JavaScript 模块的执行直到它们被使用时,而不是在启动时执行,从而缩短启动时间。

此功能已经存在并被推荐为可选配置选项几年了,列在我们的文档的性能部分中。我们现在为新应用程序默认启用此选项,以帮助人们拥有快速的 React Native 应用程序而无需额外的配置。

内联 require 是一个 Babel 转换,它获取模块导入并将其转换为内联。例如,内联 require 将此模块导入调用从文件顶部转换为它被使用的地方。

之前

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

有关内联 require 的更多信息,请参见性能文档

使用 Chrome 查看 Hermes 跟踪

在过去一年中,Facebook 赞助了 Major League Hacking fellowship,以支持对 React Native 的贡献。Jessie NguyenSaphal Patro 添加了使用 Chrome DevTools 上的 Performance 选项卡来可视化您的应用程序在使用 Hermes 时的执行情况的功能。

有关更多信息,请查看新的文档页面

支持代理的 Hermes

我们已向 Hermes 添加了代理支持,从而实现了与流行的社区项目(如 react-native-firebase 和 mobx)的兼容性。如果您一直在使用这些软件包,您现在可以迁移到 Hermes 以用于您的项目。

我们计划在即将发布的版本中使 Hermes 成为 Android 的默认 JavaScript 引擎,因此我们正在努力解决人们在使用 Hermes 时遇到的剩余问题。如果还有其他问题阻碍您的应用采用 Hermes,请在 Hermes GitHub 仓库上提出问题。

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 支持从 10 提升到 Node 12
  • Flipper 提升到 0.75.1

感谢

感谢数百位贡献者,他们使 0.64 的发布成为可能!0.64 更新日志包含此版本中包含的所有更改。

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

·2 分钟阅读
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承诺开源无障碍功能社区经理

你好,React Native 社区,

2020 年 5 月,Facebook 是第一家做出 GAAD 承诺的公司,通过这样做,他们承诺将无障碍功能作为 React Native 开源项目的核心组成部分。自 5 月以来,Facebook 花费了时间认真审查和记录 React Native 中的无障碍功能差距。到目前为止,差距分析已发现 90 个问题,所有问题都已转换为 GitHub 问题

总的来说,我们发现 React Native API 为无障碍功能提供了强大的支持。但是,我们也发现许多核心组件尚未完全利用平台无障碍功能 API,并且缺少对某些平台特定功能的支持。

贡献者的热情和多样性一直在 React Native 的开发中发挥着关键作用,而这些无障碍功能差距是当前和新贡献者的绝佳机会。如果您有兴趣为 React Native 做出贡献,我们鼓励您加入我们,使 React Native 更加易于访问。

为了表彰贡献者的努力,当无障碍功能问题被关闭并附加到拉取请求时,贡献者将在 Twitter 上收到我们社区经理的表扬。拉取请求被接受到代码库中的贡献者将在我们的 React Native 博客上的月度问题更新中突出显示。

请加入我们,使 React Native 对每个人都更易于访问。

您可以如何帮助:

React Native 文档更新

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

去年,我们进行了用户访谈并发送了一份调查,以了解更多关于人们如何以及何时使用 React Native 文档的信息。通过从 24 次访谈和 3000 多份调查回复中收集的数据和指导,我们得以努力改进 React Native 的文档,并且我们很高兴今天分享这些进展

非常感谢所有参与访谈、调查和我们的文档工作的人!您的协作使这一切成为可能。

React Native 团队原则

·5 分钟阅读
Eli White
Eli White
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 时,我们以我们的座右铭“一次学习,随处编写”来介绍它——我们的意思是任何地方开发者应该能够接触到尽可能多的人,而不受设备型号或操作系统的限制。

React Native 的目标平台非常不同,包括移动设备、桌面设备、Web、电视、VR、游戏机等等。我们希望在每个平台上实现丰富的体验,而不是要求开发者为最低公分母构建。为了实现这一目标,我们专注于支持每个平台的独特功能。这包括从不同的输入机制(例如触摸、笔、鼠标)到根本不同的消费体验(如 VR 中的 3D 环境)。

这一原则促使我们决定在跨平台 C++ 中实现 React Native 的新核心架构,以促进跨平台的对等性。我们还在改进针对其他平台维护者(如 Microsoft 的 Windows 和 macOS)的公共接口。我们努力使任何平台都能够支持 React Native。

声明式 UI

我们不相信在每个平台上部署完全相同的用户界面,我们相信使用相同的声明式编程模型公开每个平台的独特功能。我们的声明式编程模型是 React。

根据我们的经验,React 推广的单向数据流使应用程序更容易理解。我们更喜欢将屏幕表示为声明式组件的组合,而不是命令式管理的视图。React 在 Web 上的成功以及新的原生 Android 和 iOS 框架的方向表明,该行业也已接受声明式 UI。

React 普及了声明式用户界面。但是,仍然存在许多 React 独特地定位以解决的未解决问题。React Native 将继续建立在 React 的创新之上,并保持在声明式用户界面运动的最前沿。

React Native 0.63 发布公告,LogBox

·8 分钟阅读
Mike Grabowski
Mike Grabowski
Callstack 首席技术官兼联合创始人

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

LogBox

我们经常收到社区的反馈,即 React Native 中的错误和警告难以调试。为了解决这些问题,我们查看了 React Native 中的整个错误、警告和日志系统,并从头开始重新设计了它

Screenshot of LogBox

LogBox 是 React Native 中完全重新设计的红框、黄框和日志记录体验。在 0.62 版本中,我们推出了 LogBox 作为可选择启用项。在此版本中,我们将 LogBox 作为所有 React Native 中的默认体验推出。

LogBox 通过关注三个主要目标来解决错误和警告过于冗长、格式不佳或不可操作的抱怨

  • 简洁:日志应提供调试问题所需的最小信息量。
  • 格式化:日志应进行格式化,以便您可以快速找到所需的信息。
  • 可操作:日志应可操作,以便您可以修复问题并继续前进。

为了实现这些目标,LogBox 包括

  • 日志通知:我们重新设计了警告通知,并添加了对错误的支持,以便所有 console.warn 和 console.log 消息都显示为通知,而不是覆盖您的应用。
  • 代码框架:每个错误和警告现在都包含一个代码框架,该框架在应用内显示日志的源代码,使您可以快速识别问题根源。
  • 组件堆栈:所有组件堆栈现在都从错误消息中剥离出来,并放入自己的部分,顶部三个框架可见。这为您提供了一个单一且一致的空间来期望不混乱日志消息的堆栈框架信息。
  • 堆栈框架折叠:默认情况下,我们现在折叠与您的应用程序代码无关的调用堆栈框架,以便您可以快速查看应用中的问题,而无需筛选 React Native 内部结构。
  • 语法错误格式化:我们改进了语法错误的格式,并添加了带有语法高亮的代码框,以便您可以查看错误来源、修复错误并继续编码,而不会受到 React Native 的阻碍。

我们已将所有这些功能整合到一个改进的视觉设计中,该设计在错误和警告之间保持一致,并允许在一个令人愉悦的 UI 中分页浏览所有日志。

随着此项更改,我们还将弃用 YellowBox,转而使用 LogBox API。

  • LogBox.ignoreLogs():此函数取代了 YellowBox.ignoreLogs([]),作为一种静默处理任何与给定字符串或正则表达式匹配的日志的方法。
  • LogBox.ignoreAllLogs():此函数取代了 console.disableYellowBox,作为一种关闭错误或警告通知的方法。注意:这仅禁用通知,未捕获的错误仍将打开全屏 LogBox。

在 0.63 版本中,当使用这些已弃用的模块或方法时,我们将发出警告。请在这些 API 在 0.64 版本中移除之前,更新您的调用位置,使其不再使用这些 API。

有关 LogBox 和调试 react native 的更多信息,请参阅此处的文档

Pressable

React Native 的构建旨在使应用程序能够满足用户对平台的期望。这包括避免“泄露信息”——即那些泄露体验是用 React Native 构建的小细节。这些泄露信息的主要来源之一是 Touchable 组件:ButtonTouchableWithoutFeedbackTouchableHighlightTouchableOpacityTouchableNativeFeedbackTouchableBounce。这些组件通过允许您为用户交互提供视觉反馈,使您的应用程序具有交互性。然而,由于它们包含与平台交互不匹配的内置样式和效果,用户可以分辨出哪些体验是用 React Native 编写的。

此外,随着 React Native 的发展以及我们对高质量应用程序的要求不断提高,这些组件并没有随之发展。React Native 现在支持 Web、桌面和电视等平台,但对其他输入方式的支持一直不足。React Native 需要在所有平台上支持高质量的交互体验。

为了解决这些问题,我们发布了一个新的核心组件,名为 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>;

Pressable 组件在操作中的一个简单示例

您可以从文档中了解更多信息。

原生颜色 (PlatformColor, DynamicColorIOS)

每个原生平台都有系统定义颜色的概念。这些颜色会自动响应系统主题设置,例如浅色或深色模式,辅助功能设置,例如高对比度模式,甚至在应用程序中的上下文,例如包含视图或窗口的特性。

虽然可以通过 Appearance API 和/或 AccessibilityInfo 检测到其中一些设置,并相应地设置您的样式,但这种抽象不仅开发成本高昂,而且只是在近似原生颜色的外观。当在混合应用程序上工作时,这些不一致性尤其明显,在混合应用程序中,React Native 元素与原生元素并存。

React Native 现在提供了一个开箱即用的解决方案来使用这些系统颜色。PlatformColor() 是一个新的 API,可以像 React Native 中的任何其他颜色一样使用。

例如,在 iOS 上,系统提供了一种名为 labelColor 的颜色。可以在 React Native 中使用 PlatformColor,如下所示

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

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

将 Text 组件的颜色设置为 iOS 定义的 labelColor。

另一方面,Android 提供了像 colorButtonNormal 这样的颜色。您可以在 React Native 中使用此颜色,如下所示

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 的支持。它的 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 应用程序都必须支持所有 iPhone 屏幕。此提交调整了默认的 React Native 模板,使其与此要求兼容。

感谢

感谢数百位为 0.63 版本的发布做出贡献的贡献者!

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

要查看所有更新,请查看 0.63 版本的更新日志

React Native 0.62 发布公告,Flipper

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

今天我们发布了 React Native 0.62 版本,该版本默认包含对 Flipper 的支持。

此版本发布于全球疫情期间。我们今天发布此版本是为了尊重数百位为此次发布做出贡献的贡献者的工作,并防止该版本落后 master 分支太远。请注意贡献者在帮助解决问题方面的能力有所下降,并准备在必要时推迟升级。

默认启用 Flipper

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

Screenshot of Flipper for React Native

Flipper 开箱即用地提供了以下功能

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

此外,由于 Flipper 是一个可扩展平台,它提供了一个市场,可以从 NPM 中拉取插件,以便您可以发布和安装特定于您工作流程的自定义插件。在此处查看可用的插件 here

有关更多信息,请查看 Flipper 文档

新的深色模式功能

我们添加了一个新的 Appearance 模块,以提供对用户外观偏好设置的访问,例如他们首选的配色方案(浅色或深色)。

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

我们还添加了一个 Hook,用于订阅用户偏好设置的状态更新

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 和 React Native 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。升级助手提供了从您当前版本到您目标版本的更改差异,使您可以查看特定升级需要进行的更改。

即使有了这个工具,升级时仍然会出现问题。今天,我们宣布推出 Upgrade-Support,以引入更专业的升级支持。Upgrade Support 是一个 GitHub 问题跟踪器,用户可以在其中提交特定于升级项目的问题,以获得社区的帮助。

我们一直在努力改进升级体验,我们希望这些工具能够在我们尚未涵盖的边缘情况下为用户提供他们需要的支持。

其他改进

  • LogBox:我们正在添加新的 LogBox 错误和警告体验作为可选项;要启用它,请将 require('react-native').unstable_enableLogBox() 添加到您的 index.js 文件中。
  • React DevTools v4:此更改包括升级到 最新的 React DevTools,它提供了显着的性能提升、改进的导航体验以及对 React Hooks 的全面支持。
  • 辅助功能改进:我们对辅助功能进行了改进,包括添加了 accessibilityValueTouchables 上缺少的 props,onSlidingComplete 辅助功能事件,以及将 Switch 组件的默认角色从 "button" 更改为 "switch"

破坏性更改

  • 移除 PropTypes:我们正在从核心组件中移除 PropTypes,以减少 React Native 核心对应用程序大小的影响,并倾向于在编译时而不是运行时检查的静态类型系统。
  • 移除 accessibilityStates:我们已 移除 已弃用的 accessibilityStates 属性,转而使用新的 accessibilityState 属性,这是一种语义更丰富的方式,供组件向辅助功能服务描述有关其状态的信息。
  • TextInput 更改:我们从 TextInput 中移除了 onTextInput from TextInput,因为它不常见,不符合 W3C 标准,并且难以在 Fabric 中实现。我们还移除了未文档化的 inputView 属性和 selectionState

弃用

感谢

感谢数百位为 0.62 版本的发布做出贡献的贡献者!

要查看所有更新,请查看 0.62 版本的更新日志

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

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

在 React Native 社区中 6 位贡献者提交了超过 20 个 pull request 之后,我们很高兴推出 react-native doctor,这是一个新命令,可帮助您入门、排除故障并自动修复开发环境中的错误。doctor 命令深受 ExpoHomebrew 自己的 doctor 命令的启发,并带有一点受 Jest 启发的 UI。

React Native 0.61 发布公告,Fast Refresh

·3 分钟阅读
Dan Abramov
Facebook React 核心团队

我们很高兴宣布 React Native 0.61 版本,其中包括我们称之为 Fast Refresh 的全新重新加载体验。

Fast Refresh (快速刷新)

当我们向 React Native 社区询问 常见的痛点 时,最主要的答案之一是“热重载”功能已损坏。它对于函数组件无法可靠地工作,经常无法更新屏幕,并且对错别字和错误没有弹性。我们听说大多数人因为它太不可靠而将其关闭。

在 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 本地状态。
  • 如果您需要在每次编辑时重置 React 状态,则可以在包含该组件的文件中添加特殊的 // @refresh reset 注释。
  • Fast Refresh 始终重新挂载类组件,而不保留状态。这确保了它的可靠工作。
  • 我们都会在代码中犯错误!Fast Refresh 会在您保存文件后自动重试渲染。在修复语法错误或运行时错误后,您无需手动重新加载应用程序。
  • 在编辑期间添加 console.logdebugger 语句是一种简洁的调试技术。

请在 GitHub 上报告有关 Fast Refresh 的任何问题,我们将对此进行调查。

其他改进

  • 修复了 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 集成到 e2e 测试运行中,因此从现在开始,我们有一种统一的标准方式将 RN 集成到 iOS 应用程序中。这实际上弃用了 React .xcodeproj 支持,并且该文件已从 0.61 版本开始移除。注意:如果您已经使用了 0.60 自动链接,则不应受到影响。

感谢

感谢所有为 0.61 版本的发布做出贡献的贡献者!

要查看所有更新,请查看 0.61 版本的更新日志