跳至主要内容

宣布发布 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 作为可选功能。在此版本中，我们将在所有 React Native 中将 LogBox 作为默认体验推出。

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 组件运行的简单示例

您可以从文档中了解更多信息。

原生颜色 (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，这也是我们当前的目标版本。如果你仍在使用 Node 8 开发 React Native 应用程序，我们建议你升级以获取所有最新的安全修复和更新。

其他值得注意的改进​

  • 支持在 <Text /> 中渲染 <View /> 而不显式设置大小：你现在可以在任何 <Text /> 组件内部渲染任何 <View /> 组件，而无需显式设置其宽度和高度，这在以前并非总是可能的。在之前的 React Native 版本中，这会导致 RedBox 错误。
  • 将 iOS 启动画面从 xib 更改为 storyboard：从 2020 年 4 月 30 日起，提交到 App Store 的所有应用都必须使用 Xcode 故事板来提供应用的启动画面，并且所有 iPhone 应用都必须支持所有 iPhone 屏幕。此提交调整了默认的 React Native 模板以符合此要求。

致谢​

感谢数百位贡献者帮助实现了 0.63 版本！

特别感谢 Rick Hanlon 撰写了关于 LogBox 的部分，以及 Eli White 撰写了本文中关于 Pressable 的部分。

要查看所有更新，请查看 0.63 版本的更新日志。