发布 React Native 0.63：默认启用 LogBox
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
今天我们发布 React Native 0.63，该版本默认启用 LogBox。
LogBox
我们常收到社区反馈，表示在 React Native 中调试错误和警告非常困难。为解决这些问题，我们全面审查了错误/警告/日志系统，并彻底重构了这套机制。
LogBox 是对 React Native 中错误提示（redbox）、警告提示（yellowbox）和日志体验的全面革新。0.62 版本中我们以可选功能引入 LogBox，本次更新则将其设为所有 React Native 应用的默认体验。
LogBox 针对错误警告信息冗长、格式混乱、缺乏操作指引等痛点，聚焦三大核心目标：
-
简洁性：日志应仅提供调试所需的最精简信息。
-
格式化：日志应结构清晰，便于快速定位关键信息。
-
可操作性：日志应提供明确指引，助您高效解决问题。
为实现这些目标，LogBox 包含以下特性：
-
日志通知：重新设计警告通知并支持错误提示，所有 console.warn 和 console.log 消息将以通知形式展示，不再遮挡应用界面。
-
代码框架：每个错误/警告都附带代码框架，直接在应用中显示日志对应源码，助您快速定位问题根源。
-
组件调用栈：组件调用栈现从错误信息中剥离，独立展示前三个关键帧，提供整洁统一的堆栈信息查看空间。
-
调用栈折叠：默认折叠与应用程序无关的底层调用栈，避免 React Native 内部代码干扰问题排查。
-
语法错误格式化：优化语法错误格式，新增带语法高亮的代码框架，助您直观识别错误来源并快速修复。
这些功能均融入全新的视觉设计，实现错误/警告样式统一，并通过直观的分页界面提供流畅的日志浏览体验。
此次变更后，我们将弃用 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 构建的小细节。可触摸组件一直是这类破绽的主要来源：Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback 和 TouchableBounce。这些组件通过提供视觉反馈使应用具有交互性，但其内置样式和效果与平台原生交互不符，用户能轻易识别出 React Native 构建的体验。
随着 React Native 的发展和对高质量应用要求的提升，这些组件未能同步进化。当前 React Native 已支持 Web、桌面和 TV 等平台，但对额外输入模式的支持依然不足。我们需要在所有平台上提供高品质的交互体验。
为解决这些问题，我们推出了名为 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>;
A simple example of a Pressable component in action
您可通过文档了解更多信息。
原生色彩支持 (PlatformColor, DynamicColorIOS)
每个原生平台都有系统定义颜色的概念。这些颜色能自动响应系统主题设置（如浅色/深色模式）、辅助功能设置（如高对比度模式），甚至应用内的上下文环境（如容器视图特性）。
虽然可通过 Appearance 或 AccessibilityInfo API 检测部分设置并调整样式，但这类抽象方案开发成本高且只能近似原生色彩效果。在混合应用中，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>;
Sets the color of the Text component to labelColor as defined by iOS.
Android 则提供类似 colorButtonNormal 的色彩，调用方式如下：
import {View, Text, PlatformColor} from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal'),
}}>
<Text>This is colored like a button!</Text>
</View>;
Sets the background color of the View component to colorButtonNormal as defined by Android.
更多 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>;
Changes the text color based on the system theme
DynamicColorIOS 详细用法参见文档。
停止支持 iOS 9 和 Node.js 8
在 iOS 9 发布四年多后，我们将停止对其支持。此举能减少原生代码中的兼容性检查逻辑，加快开发进程。根据iOS 9 当前 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 应用必须适配全系屏幕尺寸。本次更新已调整默认 React Native 模板以满足该要求。
致谢
感谢数百位贡献者共同促成 React Native 0.63 的发布！
特别感谢 Rick Hanlon 撰写本文的 LogBox 部分，以及 Eli White 撰写 Pressable 相关内容。
完整更新日志请查看 0.63 变更记录。