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，完整更新內容可以檢視：

• https://github.com/facebook/react-native/releases/tag/v0.63.0
• https://reactnative.dev/blog/2020/07/06/version-0.63