跳到主要内容

51 篇帖子已标记 “announcement”

查看所有标签

宣布 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 中,当使用这些已弃用的模块或方法时,我们将发出警告。请在 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,它现在是我们定位的版本。如果您仍然使用 Node 8 开发 React Native 应用程序,我们鼓励您升级,以便接收所有最新的安全修复和更新。

其他值得注意的改进

  • 支持在 <Text /> 中渲染 <View /> 而无需显式大小:您现在可以在任何 <Text /> 组件内部渲染任何 <View />,而无需显式设置其宽度和高度,这在以前并非总是可能的。在以前版本的 React Native 中,这将导致 RedBox。
  • 将 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 更新日志

宣布 React Native 0.62,包含 Flipper

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

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

此版本是在全球疫情期间发布的。我们今天发布此版本是为了尊重数百位贡献者的工作,他们使此版本成为可能,并防止该版本落后于主版本太远。请注意贡献者帮助解决问题的能力下降,并准备好在必要时延迟升级。

默认启用 Flipper

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

Screenshot of Flipper for React Native

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

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

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

有关更多信息,请查看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

作为我们 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 包中维护。这是主存储库的完整分支,仅包含支持 Apple TV 所需的更改。

react-native-tvos 的版本将基于 React Native 的公开发布版本。对于此 0.62 版本的 react-native,请升级 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 组件的默认 role 从 "button" 更改为 "switch"

重大更改

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

弃用

  • AccessibilityInfo.fetch 已经被弃用,但在此版本中,我们添加了一个警告
  • 现在需要设置 useNativeDriver 以支持将来切换默认设置。
  • Animated 组件的 ref 现在是内部组件,并且弃用getNode

感谢

感谢数百位贡献者帮助实现了 0.62!

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

宣布 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 的实际操作,请查看此视频

试用一下,让我们知道您的想法!如果您愿意,可以在 Dev Menu 中将其关闭(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 更新日志

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

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

上周在 Chain React 大会上,我们宣布了 Hermes,这是我们在 Facebook 上一直在开发的开源 JavaScript 引擎。它是一个小型轻量级的 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

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

经过数百位贡献者数月的辛勤工作,React Native 核心团队自豪地宣布发布 0.60 版本。此版本处理了 Android 和 iOS 平台的重大迁移,并且还解决了许多问题。这篇博文涵盖了此版本的亮点。但与往常一样,请参阅更新日志以获取更详细的信息。最后,感谢贡献者帮助我们实现了这个里程碑!

关注辅助功能

辅助功能 API 进行了许多改进,例如 announceForAccessibility,以及对 rolesaction supportflags 等的改进。辅助功能是一门复杂的科学,但我们希望这些改进能让成为 A11Y 更容易一些。请务必查看 React Native 开源更新 2019 年 6 月,了解这些变更的更多详情。

全新的开始

React Native 的初始屏幕已更新!感谢众多贡献者帮助创建了新的 UI。这个全新的“Hello World”将以更友好、更吸引人的方式欢迎用户进入生态系统。

The new init screen helps developers get started from the get-go with resources and a good example

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! 存在兼容性问题,并且我们正在跟踪一个 问题,其中包含解决方法和未来的补丁。

精简核心移除

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 用户查看版本之间的更改。查看 更新后的升级文档,立即试用它来了解您的升级路径!

Upgrade Helper cleanly and easily shows the changes needed to migrate to a different version of React Native

致库维护者的注意事项

AndroidX 的更改几乎肯定需要更新您的库,因此请务必尽快包含支持。如果您还无法升级,请考虑针对 jetifier 检查您的库,以确认用户能够在构建时修补您的库。

查看 自动链接 文档以更新您的配置和 readme 文件。根据您之前集成库的方式,您可能还需要进行一些额外的更改。查看 CLI 中的 依赖项 指南,了解如何定义您的依赖项接口。

感谢

虽然这些是我们注意到的重点,但还有许多其他令人兴奋之处。要查看所有更新,请查看 changelog。与往常一样,请继续关注更多新闻。同时享受 0.60 版本吧!

React Native 开源更新 2019 年 6 月

·8 分钟阅读
Christoph Nakazawa
Christoph Nakazawa
前 Facebook 工程师

代码与社区健康

在过去的六个月中,共有 550 多位贡献者向 React Native 提交了 2800 个提交。来自社区的 400 位贡献者创建了超过 1,150 个 Pull Request,其中 820 个 Pull Request 已合并。

在过去的六个月中,平均每天的 Pull Request 数量已从三个增加到大约六个,即使我们通过精简核心工作将网站、CLI 和许多模块从 React Native 中分离出来。现在,平均未处理的 pull request 数量已降至 25 个以下,我们通常会在数小时或数天内回复建议和评论。

有意义的社区贡献

我们想重点介绍一些我们认为很棒的近期贡献

精简核心

精简核心 的主要动机是将模块从 React Native 中分离出来,放入单独的存储库中,以便它们可以获得更好的维护。在短短六个月内,WebViewNetInfoAsyncStorage网站CLI 等存储库总共收到了 800 多个 Pull Request。除了更好的维护之外,这些项目还可以比 React Native 本身更频繁地独立发布。

我们还借此机会从 React Native 本身中删除了过时的 polyfill 和旧版组件。过去需要 polyfill 来支持旧版 JavaScriptCore (JSC) 中的 MapSet 等语言功能。现在 React Native 附带了新版本,这些 polyfill 已被删除。

这项工作仍在进行中,本地和 JavaScript 方面还有更多内容需要分离或删除,但早期迹象表明,我们设法扭转了表面积和应用大小增加的趋势:例如,当查看 JavaScript 包时,大约在一年前的 0.54 版本中,React Native JavaScript 包大小为 530kb,并在短短 6 个月内增长到 0.57 版本的 607kb(+77kb)。现在我们看到主分支上的包大小减少了 28kb,降至 579kb,降幅超过 100kb!

当我们完成精简核心工作的第一轮迭代时,我们将努力更加关注添加到 React Native 的新 API,并将不断评估使 React Native 更小、更快的方法,以及寻找授权社区拥有各种组件所有权的方法。

用户反馈

六个月前,我们向社区询问了“您不喜欢 React Native 的哪些方面?”,这很好地概述了人们面临的问题。我们 在几个月前回复了该帖子,现在是时候总结一下在首要问题上取得的进展了

  • 升级: React Native 社区团结一致,对升级体验进行了多项改进:自动链接,通过 rn-diff-purge 改进的升级命令,一个升级助手网站(即将推出)。我们还将确保通过为每个主要版本发布博客文章来传达重大变更和令人兴奋的新功能。这些改进中的许多改进将使 0.60 版本之后的未来升级变得更加容易。
  • 支持/不确定性: 许多人对 Pull Request 缺乏活动以及对 Facebook 在 React Native 中的投资普遍不确定性感到沮丧。正如我们在上面所展示的,我们可以自信地说,我们已准备好迎接更多的 Pull Request,并且我们热切期待您的提案和贡献!
  • 性能: React Native 0.59 附带了 JavaScriptCore (JSC) 的新版本,速度更快得多。另外,我们一直在努力使默认启用 inline-requires 变得更容易,并且在未来几个月内我们将为您带来更多令人兴奋的更新。
  • 文档: 我们最近开始努力 全面修改和重写 React Native 的所有文档。如果您希望做出贡献,我们很乐意获得您的帮助!
  • Xcode 中的警告: 我们 摆脱了所有现有的警告,并努力不引入新的警告。
  • 热重载: React 团队正在构建一个 新的热重载系统,该系统很快将集成到 React Native 中。

遗憾的是,我们还无法改进所有内容

  • 调试: 我们修复了人们每天遇到的许多不方便的 bug 和问题,但不幸的是,我们在这方面的进展不如我们希望的那么大。我们认识到使用 React Native 进行调试并不理想,我们将在未来优先改进这一点。
  • Metro 符号链接: 遗憾的是,我们尚未能够为此实施简单明了的解决方案。但是,React Native 用户 分享了各种解决方法,这些解决方法可能对您有用。

鉴于过去六个月中的大量更改,我们想再次问您同样的问题。如果您正在使用最新版本的 React Native,并且您有希望提供反馈的内容,请在我们的新版本 “您不喜欢 React Native 的哪些方面?” 上发表评论

持续集成

Facebook 首先将所有 Pull Request 和内部更改直接合并到 Facebook 的存储库中,然后将所有提交同步回 GitHub。Facebook 的基础设施与常见的持续集成服务不同,并非所有开源测试都在 Facebook 内部运行。这意味着同步到 GitHub 的提交经常会破坏开源测试,这需要花费大量时间来修复。

来自 React Native 团队的 Héctor Ramos 在过去的两个月中一直在改进 React Native 在 Facebook 和 GitHub 上的持续集成系统。现在,大多数开源测试在更改提交到 Facebook 上的 React Native 之前运行,这将使提交同步时 GitHub 上的 CI 保持稳定。

下一步

请务必查看我们关于 React Native 未来的演讲!在接下来的几个月中,Facebook 的 React Native 团队成员将在 Chain ReactReact Native EU 上发表演讲。此外,请关注我们即将发布的下一个版本 0.60,它即将到来。这将令人兴奋

React Native 在 F8 和开源播客

·3 分钟阅读
Christoph Nakazawa
Christoph Nakazawa
前 Facebook 工程师

本周,Eli WhiteF8 2019 上发表了关于 React Native 在 Facebook 的 Android 和 iOS 应用中的演讲。我们很高兴分享我们在过去两年中一直在做的事情以及我们接下来要做的事情。

Facebook 的开发者网站 上查看视频

F8 Talk about React Native

演讲亮点:

  • 我们在 2017 年和 2018 年专注于 React Native 最大的产品 Facebook Marketplace。我们与 Marketplace 团队合作,以提高质量并为产品增添乐趣。目前,Marketplace 是 Facebook 应用中 Android 和 iOS 平台上质量最高的产品之一。
  • Marketplace 的性能也是一个巨大的挑战,尤其是在中端 Android 设备上。在过去一年中,我们将启动时间缩短了 50% 以上,并且还在不断改进!最大的改进正在构建到 React Native 中,并将于今年晚些时候提供给社区。
  • 我们有信心可以使用 React Native 构建 Facebook 需要的高质量和高性能应用。这种信心使我们能够对更大的赌注进行投资,例如 重新思考 React Native 的核心
  • Microsoft 支持并将 React Native 用于 Windows,使人们能够使用他们的专业知识和代码库来渲染到 Microsoft 的通用 Windows 平台。查看下周的 Microsoft Build,听取他们更多地谈论这一点

关于开源的 React Radio Podcast

Eli 的演讲最后谈到了我们最近的开源工作。我们 在 3 月份更新了我们的进展,最近 Nader DabitGant Laborde 邀请 Christoph 在他们的播客 React Native Radio 上聊天,讨论 React Native 在开源中的应用。

播客亮点:

  • 我们讨论了 Facebook 的 React Native 团队如何看待开源,以及我们如何为一个像 React Native 规模 的项目构建可持续的社区。
  • 我们正按计划删除多个模块,作为 精简核心 工作的一部分。自提取以来,WebView 和 React Native CLI 等许多模块已收到 100 多个 Pull Request。
  • 接下来,我们将专注于全面修改 React Native 网站和文档。敬请关注!

您很快将在您最喜欢的播客应用中找到该集,或者您可以在此处收听录音

发布 React Native 0.59

·6 分钟阅读
Ryan Turner
核心维护者和 React Native 开发者

欢迎来到 React Native 0.59 版本!这是又一个重要版本,包含 88 位贡献者的 644 个提交。贡献也以其他形式出现,因此感谢您维护问题、培养社区和教导人们有关 React Native 的知识。本月带来了一些备受期待的更改,我们希望您喜欢它们。

🎣 Hooks 来了

React Hooks 是此版本的一部分,它允许您跨组件重用有状态逻辑。关于 hooks 有很多讨论,但如果您还没有听说过,请查看以下一些精彩资源

务必在您的应用中尝试一下。我们希望您发现这种重用和我们一样令人兴奋。

📱 更新的 JSC 意味着 Android 上的性能提升和 64 位支持

React Native 使用 JSC (JavaScriptCore) 为您的应用程序提供支持。Android 上的 JSC 已经有几年历史了,这意味着许多现代 JavaScript 功能不受支持。更糟糕的是,与 iOS 的现代 JSC 相比,它的性能很差。随着此版本的发布,这一切都将改变。

感谢 @DanielZlotin@dulmandakh@gengjiawen@kmagiera@kudo 的一些出色工作,JSC 已经赶上了过去几年。这带来了 64 位支持、现代 JavaScript 支持和 巨大的性能改进。感谢您还使这成为一个可维护的过程,以便我们能够利用未来的 WebKit 改进,而无需进行如此多的准备工作,并感谢 Software Mansion 和 Expo 使这项工作成为可能。

💨 通过内联 require 加快应用启动速度

我们希望帮助人们默认拥有高性能的 React Native 应用,并且正在努力将 Facebook 的优化带给社区。应用程序根据需要加载资源,而不是减慢启动速度。此功能称为“内联 require”,因为它允许 Metro 识别要延迟加载的组件。具有深度和多样化组件架构的应用将看到最大的改进。

source of the metro.config.js file in the 0.59 template, demonstrating where to enable inlineRequires

在默认启用之前,我们需要社区告知我们它的工作原理。当您升级到 0.59 版本时,将会有一个新的 metro.config.js 文件;将选项设置为 true 并向我们提供您的反馈!阅读性能文档中关于内联 require 的更多信息,以便评估您的应用性能。

🚅 Lean Core 正在进行中

React Native 是一个庞大而复杂的项目,拥有复杂的代码仓库。这使得代码库对于贡献者来说不太容易上手,难以测试,并且作为开发依赖项显得臃肿。“Lean Core”是我们为解决这些问题而做出的努力,通过将代码迁移到单独的库中以实现更好的管理。过去几个版本已经看到了这方面的初步进展,但现在让我们认真对待

您可能会注意到,一些额外的组件现在已被正式弃用。这是个好消息,因为现在有负责人积极维护这些功能。请注意警告消息,并将这些功能迁移到新的库,因为它们将在未来的版本中被移除。下表指示了组件、其状态以及您可以迁移到的位置。

组件已弃用?新家
AsyncStorage0.59@react-native-community/react-native-async-storage
ImageStore0.59expo-file-systemreact-native-fs
MaskedViewIOS0.59@react-native-community/react-native-masked-view
NetInfo0.59@react-native-community/react-native-netinfo
Slider0.59@react-native-community/react-native-slider
ViewPagerAndroid0.59@react-native-community/react-native-viewpager

在接下来的几个月中,将会有更多组件遵循这条道路,迈向更精简的核心。我们正在寻求帮助——前往 lean core umbrella 参与进来。

👩🏽‍💻 CLI 改进

React Native 的命令行工具是开发者进入生态系统的入口点,但它们长期存在问题并且缺乏官方支持。CLI 工具已被移至新的代码仓库,并且一个专门的维护者团队已经做出了一些令人兴奋的改进。

日志的格式现在更好。命令现在几乎可以立即运行——您会立即注意到差异。

0.58&#39;s CLI is slow to start0.58&#39;s CLI is nearly instantaneous

🚀 升级到 0.59

我们听取了您关于 React Native 升级过程的反馈,并且我们正在采取措施以改进未来版本的体验。要升级到 0.59,我们建议使用 rn-diff-purge 来确定您当前 React Native 版本和 0.59 之间的更改,然后手动应用这些更改。一旦您将项目升级到 0.59,您将能够使用新改进的 react-native upgrade 命令(基于 rn-diff-purge!)来升级到 0.60 及更高版本,随着新版本的发布。

🔨 破坏性更改

0.59 版本中对 Android 的支持已根据 Google 的最新建议进行了清理,这可能会导致现有应用出现潜在的破坏。此问题可能会表现为运行时崩溃并显示消息“You need to use a Theme.AppCompat theme (or descendant) with this activity”。我们建议更新您项目的 AndroidManifest.xml 文件,确保 android:theme 值是 AppCompat 主题(例如 @style/Theme.AppCompat.Light.NoActionBar)。

react-native-git-upgrade 命令已在 0.59 版本中移除,取而代之的是新改进的 react-native upgrade 命令。

🤗 感谢

许多新的贡献者帮助实现了从 flow 类型生成原生代码解决 Xcode 警告 - 这些是学习 React Native 工作原理并为更大的利益做出贡献的好方法。谢谢你们!未来请留意类似的问题。

虽然这些是我们注意到的亮点,但还有许多其他令人兴奋的内容。要查看所有更新,请查看 changelog。0.59 是一个重要的版本——我们迫不及待地想让您试用它。

在今年余下的时间里,我们还有更多改进即将到来。敬请期待!

Ryan 和整个 React Native 核心团队

React Native 开源更新 2019 年 3 月

·5 分钟阅读
Christoph Nakazawa
Christoph Nakazawa
前 Facebook 工程师

在决定加大对 React Native 开源社区的投入后,我们在 2018 年第四季度发布了我们的 React Native 开源路线图

在我们的第一个里程碑中,我们专注于识别和改进我们社区中最明显的方面。我们的目标是减少未处理的拉取请求、减少项目的表面积、识别主要用户问题,并建立社区管理指南。

在过去的两个月中,我们取得了超出预期的进展。请继续阅读以了解更多详情

拉取请求

为了构建一个健康的社区,我们必须快速响应代码贡献。在过去的几年中,我们降低了审查社区贡献的优先级,并累积了 280 个拉取请求(2018 年 12 月)。在第一个里程碑中,我们将未处理的拉取请求数量减少到约 65 个。与此同时,每天打开的拉取请求的平均数量从 3.5 个增加到 7 个,这意味着在过去三个月中,我们处理了约 600 个拉取请求

我们合并了近三分之二的拉取请求,并关闭了三分之一。如果拉取请求已过时、质量不高或不必要地增加了项目的表面积,则会在未合并的情况下关闭它们。大多数合并的拉取请求修复了错误、改进了跨平台对等性或引入了新功能。值得注意的贡献包括提高类型安全性以及正在进行的对 AndroidX 的支持工作。

在 Facebook,我们从主分支运行 React Native,因此我们会在所有更改进入 React Native 版本之前先进行测试。在所有合并的拉取请求中,只有六个引起了问题:四个仅影响内部开发,两个在发布候选状态中被发现。

更引人注目的社区贡献之一是更新后的“RedBox”屏幕。这是一个很好的例子,说明社区如何使开发者体验更加友好。

精简核心

React Native 目前具有非常广泛的表面积,其中包含许多我们 Facebook 不经常使用的未维护的抽象。我们正在努力减少表面积,以使 React Native 更小,并允许社区更好地维护 Facebook 大部分未使用的抽象。

在第一个里程碑中,我们请求社区帮助 Lean Core 项目。反响非常热烈,我们几乎跟不上所有进展。查看不到一个月内完成的所有工作

最让我们兴奋的是,维护者们已经积极投入,修复长期存在的问题、添加测试并支持长期请求的功能。这些模块获得的支持比以往在 React Native 内部获得的更多,这表明这对社区来说是重要的一步。此类项目的示例包括 WebView,自提取以来已收到许多拉取请求;以及 CLI,现在由社区成员维护,并获得了急需的改进和修复。

主要用户问题

在 12 月,我们询问了社区他们不喜欢 React Native 的哪些方面。我们汇总了回复,并回复了每一个问题。幸运的是,我们社区面临的许多问题也是 Facebook 的问题。在我们的下一个里程碑中,我们计划解决一些主要问题。

最受关注的问题之一是升级到较新版本 React Native 的开发者体验。不幸的是,这不是我们自己会遇到的问题,因为我们从主分支运行 React Native。值得庆幸的是,社区成员已经挺身而出解决这个问题

  • 来自 Callstack 的 Michał Pierzchała 通过在底层使用 rn-diff-purge 改进了 react-native upgrade。我们还更新了网站,删除了过时的升级说明。
  • 我们计划默认推荐 CocoaPods 用于 iOS 项目,这将减少升级 React Native 时项目文件中的变动。这将使人们更容易安装和链接第三方模块,这在 Lean Core 的背景下尤为重要,因为我们希望项目默认链接更多模块。

0.59 版本发布

如果没有 React Native 社区的帮助,特别是 Mike GrabowskiLorenzo Sciandra,我们将无法发布版本。我们希望改进发布管理流程,并计划从现在开始更多地参与其中

  • 我们将与社区成员合作,为每个主要版本创建一篇博客文章。
  • 当人们升级到新版本时,我们将在 CLI 中直接显示破坏性更改。
  • 我们将减少发布版本所需的时间。我们正在探索增加自动化测试的方法,并制定改进的手动测试计划。

许多这些计划将纳入即将发布的 React Native 0.59 版本中。0.59 将包含 React Hooks、Android 的新 64 位版本 JavaScriptCore,以及许多性能和功能改进。目前已作为发布候选版本发布,预计在未来两周内将稳定。

下一步

在接下来的两个月中,我们将继续管理拉取请求 以保持进度,同时开始减少未解决的 GitHub 问题数量。我们将通过 Lean Core 项目继续减少 React Native 的表面积。我们计划解决社区最关心的 5 个问题。随着我们最终确定社区指南,我们将把注意力转向我们的网站和文档。

我们非常高兴在三月份于 Facebook 伦敦接待来自我们社区的十多位贡献者,以帮助推动其中几项工作。我们很高兴您正在使用 React Native,并希望您能看到和感受到我们在 2019 年正在进行的改进。我们将在几个月后再次发布更新,并且在此期间我们将继续合并您的拉取请求!⚛️✌️