今天我们发布了 React Native 0.63,其中 LogBox 默认开启。
LogBox
我们经常从社区收到反馈,称 React Native 中的错误和警告难以调试。为了解决这些问题,我们审视了 React Native 中整个错误、警告和日志系统,并从头开始重新设计了它。

LogBox 是 React Native 中一个完全重新设计的 redbox、yellowbox 和日志记录体验。在 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 之前,更新您的调用站点,使其不再使用这些 API。
有关 LogBox 和调试 react native 的更多信息,请参阅此处的文档。
Pressable
构建 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
的颜色。可以在 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 更新日志。