React Native 0.63 發布,告警系統、顏色與交互能力改進

React Native 0.63 已經發布了，此版本主要亮點包括：

• 默認啟用 LogBox
• <Pressable /> 組件
• 新增使用系統定義顏色的 API

默認啟用 LogBox

社區一直以來反饋錯誤和警告很難在 React Native 中進行調試，因此開發團隊研究了 React Native 中的整個錯誤、警告和日誌系統，從頭開始對其進行了重新設計，現在使用一個新系統 LogBox 替換 redbox、yellowbox 與日誌記錄。上一個版本中已經引入該 LogBox，此版本開始，它默認開啟，並在使用 yellowbox 等一些不建議使用的模塊或方法時發出警告，0.64 版本中將刪除相關 API。

LogBox 目標是：

• 簡潔：日誌應提供調試問題所需的最少信息量。
• 格式化：日誌應該格式化，可以快速找到所需的信息。
• 可操作性：日誌應可操作，可以解決問題並繼續進行。

為了實現這些目標，LogBox 設計時包括：

• 日誌通知：重新設計了警告通知並增加了對錯誤的支持，以便所有 console.warn 和 console.log 消息都顯示為通知，而不是覆蓋應用程式。
• 代碼幀：每個錯誤和警告都包括一個代碼幀，可在應用程式內部顯示日誌的原始碼，可以快速識別問題的來源。
• 組件棧：提供了一個一致的、不會使日誌消息混亂的組件棧幀信息，只顯示前三個。
• 摺疊組件棧幀：默認情況下摺疊與應用程式代碼無關的調用堆棧幀，可以在應用程式中快速查看問題，而不必通過 React Native 內部篩選。
• 語法錯誤格式：改進了語法錯誤的格式，並通過語法高亮添加了代碼幀，可以查看錯誤的根源進行修復，並繼續進行編碼。

pressable 組件

React Native 現在支持 Web、桌面和電視等平臺，但是缺少對其它輸入方式的支持。為了解決在所有平臺上支持高質量的交互體驗，此版本提供了一個新核心組件Pressable。該組件可用於檢測各種類型的交互，旨在提供對交互當前狀態的直接訪問，而不必在父組件中手動維護狀態。同時它還旨在使平臺能夠擴展其功能，例如懸停、模糊與聚焦等。

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>;

新增使用系統定義顏色的 API

每個平臺都有系統定義的顏色，儘管可以通過AppearanceAPI 或 AccessibilityInfo檢測並設置其中的某些樣式，但是這樣的操作不僅開發成本高昂，而且還局限。

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>;

另一方面，Android 提供像 colorButtonNormal 這樣的顏色，可以在 React Native 中這樣使用 PlatformColor：

import { View, Text, PlatformColor } from 'react-native';<View style={{ backgroundColor: PlatformColor('?attr/colorButtonNormal') }}> <Text>This is colored like a button!</Text></View>;

同時DynamicColorIOS是僅限於 iOS 的 API，可以定義在淺色和深色模式下使用的顏色。與PlatformColor相似，可以在任何可以使用顏色的地方使用：

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>;

此外 0.63 版本還不再支持 iOS 9 與 Node.js 8，完整更新內容可以查看：