宣布 React Native 0.63，带有 LogBox
今天我们发布了 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 中，当使用这些已弃用的模块或方法时，我们将发出警告。请在这些 API 在 0.64 中删除之前更新您的调用站点。
有关 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 组件在操作中的一个简单示例
您可以从文档中了解更多信息。
原生颜色 (PlatformColor, DynamicColorIOS)
每个原生平台都有系统定义颜色的概念。这些颜色会自动响应系统主题设置，例如浅色或深色模式、辅助功能设置（例如高对比度模式），甚至在应用程序中的上下文（例如包含视图或窗口的特征）。
虽然可以通过 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 和 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 更新日志。
