我们已经向 GitHub 社区发布了经过全面审查的差距分析和问题列表，以改进 React Native 的可访问性，至今已过去四周。在 React Native 社区的帮助下，我们已经在改进可访问性方面取得了长足进步。社区成员一直在帮助贡献者、审查测试，并引起人们对先前可访问性问题的关注。自 3 月 8 日以来，社区已通过 4 个拉取请求关闭了 6 个问题，另外还有 7 个拉取请求正在等待审查。
在继续这项工作的同时，Facebook 的 React Native 和可访问性团队正在评估在此倡议之前提交的可访问性错误和问题，以确定它们是否已被我们当前的差距分析涵盖，或者是否存在需要纳入项目中的其他问题。一个新问题已被发现并纳入项目，另外四个问题直接映射到现有问题，另外两个问题预计将通过解决导致其问题根本原因的现有问题来关闭。
感谢所有参与的社区成员。你们真正推动了 React Native 变得对所有人更易访问！
今天，我们发布了 React Native 0.64，该版本在 iOS 上支持 Hermes。
Hermes 是一个针对运行 React Native 优化的开源 JavaScript 引擎。它通过减少内存使用、减小下载大小以及缩短应用变得可用或“交互时间”（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 是一个 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 的更多信息，请参阅性能文档。
在过去的一年中，Facebook 赞助了Major League Hacking 奖学金，支持对 React Native 的贡献。Jessie Nguyen 和Saphal Patro 添加了使用 Chrome DevTools 上的“性能”选项卡来可视化应用在使用 Hermes 时执行情况的功能。
有关更多信息，请查看新的文档页面。
我们已向 Hermes 添加了代理支持，从而与 react-native-firebase 和 mobx 等流行的社区项目兼容。如果您一直在使用这些包，您现在可以将项目迁移到 Hermes。
我们计划在即将发布的版本中将 Hermes 设为 Android 的默认 JavaScript 引擎，因此我们正在努力解决用户在使用 Hermes 时遇到的剩余问题。如果您遇到任何阻止应用采用 Hermes 的问题，请在Hermes GitHub 仓库上提交问题。
React 17 不包含面向开发人员的新功能或重大更改。对于 React Native 应用，主要更改是新的 JSX 转换，使文件不再需要导入 React 即可使用 JSX。
有关 React 17 的更多信息，请参阅React 博客。
感谢数百位贡献者帮助实现了 0.64！0.64 版本变更日志 包含此版本中包含的所有更改。
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 可访问性项目页面，查看需要他们 React Native 知识的 GitHub 问题。
有兴趣更新 React Native 文档以反映已解决的可访问性差距的技术作家可以访问 React Native 文档。
与任何可能能够提供帮助的人分享这项倡议！
关注 React Native 的 GAAD Pledge 开源可访问性社区经理，在 Twitter 或 Facebook 上关注进展。
去年，我们进行了用户访谈并发送了 调查，以了解人们如何以及何时使用 React Native 文档。通过从 24 次访谈和超过 3000 份调查回复中收集的数据和指导，我们能够改进 React Native 的文档，我们很高兴今天分享这些进展。
Pressable 和 React Native 组件介绍 文档非常感谢所有参与访谈、调查和文档工作的人！你们的合作使这一切成为可能。
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 的新核心架构，以促进跨平台的同等性。我们还在改进针对其他平台维护者（如 Windows 和 macOS 的微软）的目标公共接口。我们努力使任何平台都能支持 React Native。
我们不相信在每个平台上部署完全相同的用户界面，我们相信**使用相同的声明式编程模型来展现每个平台的独特功能**。我们的声明式编程模型是 React。
根据我们的经验，React 推广的单向数据流使应用程序更容易理解。我们更喜欢将屏幕表达为声明式组件的组合，而不是使用命令式管理的视图。React 在 Web 上的成功以及新的原生 Android 和 iOS 框架的发展方向表明，业界也已经接受了声明式 UI。
React 推广了声明式用户界面。但是，仍然存在许多 React 独具优势可以解决的未解决问题。React Native 将继续在 React 的创新基础上构建，并继续站在声明式用户界面运动的前沿。
今天，我们发布了 React Native 0.63，默认情况下启用了 LogBox。
我们经常从社区收到反馈，称 React Native 中的错误和警告难以调试。为了解决这些问题，我们查看了 React Native 中的整个错误、警告和日志系统，并对其进行了从头开始的重新设计。
LogBox 是 React Native 中完全重新设计的红框、黄框和日志体验。在 0.62 版本中，我们将 LogBox 作为可选功能引入。在此版本中，我们将 LogBox 作为所有 React Native 的默认体验推出。
LogBox 通过关注三个主要目标来解决错误和警告过于冗长、格式不佳或不可操作的抱怨。
为了实现这些目标，LogBox 包括
我们将所有这些功能包装在一个改进的视觉设计中，该设计在错误和警告之间保持一致，并允许在一个愉快的 UI 中分页浏览所有日志。
通过此更改，我们还弃用了 YellowBox，转而使用 LogBox API
LogBox.ignoreLogs()：此函数替换 YellowBox.ignoreLogs([])，作为静默任何与给定字符串或正则表达式匹配的日志的方法。LogBox.ignoreAllLogs()：此函数替换 console.disableYellowBox，作为关闭错误或警告通知的方法。注意：这仅禁用通知，未捕获的错误仍将打开全屏 LogBox。在 0.63 中，我们将在使用这些已弃用的模块或方法时发出警告。请在 0.64 中删除它们之前，更新您的调用站点以脱离这些 API。
有关 LogBox 和调试 React Native 的更多信息，请参阅此处文档here。
React Native 旨在使应用程序能够满足用户对平台的期望。这包括避免“暗示”——一些暗示体验是用 React Native 构建的小细节。这些暗示的一个主要来源是 Touchable 组件：Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback 和 TouchableBounce。这些组件通过允许您向用户交互提供视觉反馈来使您的应用程序具有交互性。但是，由于它们包含不匹配平台交互的内置样式和效果，因此用户可以分辨出体验是用 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 组件运行的简单示例
您可以从文档中了解更多信息。
每个原生平台都有系统定义颜色的概念。这些颜色会自动响应系统主题设置（例如浅色或深色模式）、辅助功能设置（例如高对比度模式），甚至是在应用程序中的上下文（例如包含视图或窗口的特性）。
虽然可以通过Appearance API 和/或AccessibilityInfo 检测其中一些设置并相应地设置您的样式，但这种抽象不仅开发成本高，而且近似于原生颜色的外观。当处理混合应用程序时，这些不一致性尤其明显，其中 React Native 元素与原生元素并存。
React Native 现在提供了一种开箱即用的解决方案来使用这些系统颜色。PlatformColor() 是一个新的 API，可以像 React Native 中的任何其他颜色一样使用。
例如，在 iOS 上，系统提供了一种名为 labelColor 的颜色。这可以通过 PlatformColor 在 React Native 中使用，如下所示
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 的支持。此更改将使我们能够通过减少需要放在原生代码中的兼容性检查的数量来更快地前进，以检测某个功能是否在特定 iOS 版本上受支持。由于其市场份额为 1%，因此对您的客户几乎不会产生负面影响。
同时，我们也放弃了对 Node 8 的支持。其 LTS 维护周期于 2019 年 12 月到期。当前的 LTS 是 Node 10，现在是我们目标的版本。如果您仍在使用 Node 8 开发 React Native 应用程序，我们建议您升级以接收所有最新的安全修复和更新。
<Text /> 中渲染 <View /> 而不显式设置大小**：您现在可以在任何 <Text /> 组件中渲染任何 <View />，而无需显式设置其宽度和高度，这在以前并非总是可能的。在 React Native 的先前版本中，这会导致 RedBox。xib 更改为 storyboard**：从 2020 年 4 月 30 日开始，提交到 App Store 的所有应用程序都必须使用 Xcode 故事板来提供应用程序的启动屏幕，并且所有 iPhone 应用程序都必须支持所有 iPhone 屏幕。此提交调整了默认的 React Native 模板，使其与此要求兼容。感谢数百位贡献者帮助实现了 0.63！
特别感谢Rick Hanlon 撰写了关于
LogBox的部分，以及Eli White 撰写了本文中关于Pressable的部分。
要查看所有更新，请查看0.63 版本更新日志。
今天，我们发布了 React Native 0.62 版本，其中默认包含对 Flipper 的支持。
本次发布正值全球疫情大流行期间。我们今天发布此版本是为了尊重数百位贡献者为其付出的辛勤工作，并防止版本落后于主分支太多。请注意，贡献者协助解决问题的能力有所下降，并做好必要时延迟升级的准备。
Flipper 是一款用于调试移动应用的开发者工具。它在 Android 和 iOS 社区很受欢迎，在本版本中，我们默认启用了对新旧 React Native 应用的支持。
Flipper 开箱即用地提供了以下功能
此外，由于 Flipper 是一个可扩展的平台，它提供了一个从 NPM 拉取插件的市场，因此您可以发布和安装特定于您工作流程的自定义插件。请查看此处提供的插件here。
有关更多信息，请查看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>;
};
有关更多信息，请参阅Appearance 和 useColorScheme 的文档。
作为我们精简核心工作的一部分，以及为了使 Apple TV 与 React Native Windows 和 React Native macOS 等其他平台保持一致，我们已开始从核心代码中删除 Apple TV 特定的代码。
将来，React Native 对 Apple TV 的支持将与相应的 react-native-tvos NPM 包一起在react-native-community/react-native-tvos 中维护。这是主存储库的完整分支，只包含支持 Apple TV 所需的更改。
react-native-tvos 的版本将基于 React Native 的公开版本。对于 react-native 的 0.62 版本，请将 Apple TV 项目升级到使用 react-native-tvos 0.62。
在发布 0.61 时，社区引入了一个新的升级助手工具来支持开发人员升级到 React Native 的新版本。升级助手提供了从您当前版本到目标版本的更改差异，使您能够查看特定升级需要进行的更改。
即使有了此工具，在升级时仍然会出现问题。今天，我们通过宣布升级支持来提供更多专门的升级支持。升级支持是一个 GitHub 问题跟踪器，用户可以在其中提交与升级项目相关的特定问题，以获得社区的帮助。
我们一直在努力改进升级体验，我们希望这些工具能够为用户提供他们在我们尚未涵盖的极端情况下所需的帮助。
require('react-native').unstable_enableLogBox() 添加到您的 index.js 文件中。onSlidingComplete 无障碍事件，以及将 Switch 组件的默认角色从 "button" 更改为 "switch"。propTypes，以减少 React Native 核心对应用大小的影响，并倾向于在编译时而不是运行时进行检查的静态类型系统。accessibilityStates 属性，转而使用新的 accessibilityState 属性，这是一种更具语义意义的方式，组件可以通过它向无障碍服务描述其状态信息。onTextInput from TextInput，因为它不常见、不符合 W3C 标准，并且难以在Fabric 中实现。我们还删除了未记录的 inputView 属性和 selectionState。AccessibilityInfo.fetch 之前已经弃用，但在此版本中我们添加了一个警告。useNativeDriver 来支持将来切换默认值now required。Animated 组件的 ref 现在是内部组件，并且弃用了 getNode。感谢数百位贡献者帮助实现了 0.62 版本！
要查看所有更新，请查看0.62 版本变更日志。
我们很高兴地宣布 React Native 0.61，其中包括一个名为“快速刷新”的新重新加载体验。
当我们询问 React Native 社区常见痛点时，其中一个最常被提及的答案是“热重载”功能已损坏。它对函数组件的可靠性不高，常常无法更新屏幕，并且对拼写错误和错误的容错能力较差。我们了解到大多数人都会将其关闭，因为它太不可靠了。
在 React Native 0.61 中，我们将现有的“实时重载”（保存时重新加载）和“热重载”功能统一到一个名为“快速刷新”的新功能中。快速刷新是从头开始实现的，遵循以下原则
要查看快速刷新的实际效果，请观看此视频。
试一试，并告诉我们您的想法！如果您愿意，可以在 Dev 菜单中将其关闭（iOS 上按 Cmd+D，Android 上按 Cmd+M 或 Ctrl+M）。启用和禁用操作是即时的，因此您可以随时进行操作。
以下是一些快速刷新技巧
// @refresh reset 注释。console.log 或 debugger 语句是一种简洁的调试技巧。请在 GitHub 上报告快速刷新中遇到的任何问题，我们会进行调查。
act 的改进等等。请参阅React 16.9 博客文章以获取自动迁移脚本和更多信息。感谢所有帮助实现 0.61 版本的贡献者！
要查看所有更新，请查看0.61 版本变更日志。
上周在 Chain React 上，我们宣布了 Hermes，这是一个我们在 Facebook 一直在开发的开源 JavaScript 引擎。它是一个小巧轻便的 JavaScript 引擎，针对在 Android 上运行 React Native 进行了优化。查看详情！
Hermes 通过降低内存使用、减少下载大小以及缩短应用程序变得可用或“交互时间”（TTI）的时间来提升 React Native 的性能。
“在我们分析性能数据时，我们注意到 JavaScript 引擎本身是启动性能和下载大小的重要因素。有了这些数据，我们知道我们必须优化 JavaScript 在移动手机等受限环境中的性能，与台式机或笔记本电脑相比。在探索其他选项后，我们构建了一个名为 Hermes 的新 JavaScript 引擎。它旨在提高应用程序性能，重点关注我们的 React Native 应用程序，即使在内存有限、存储速度慢和计算能力降低的大众市场设备上也是如此。” —Hermes：一个针对移动应用程序（从 React Native 开始）优化的开源 JavaScript 引擎
想立即开始使用吗？请务必查看我们新的指南，了解如何在您现有的 React Native 应用程序中启用 Hermes！
插图由 Rachel Nabors 绘制