跳到主要內容

2021 年下半年的 React Native

·6 分鐘閱讀時間
Luna Wei
Luna Wei
Meta 軟體工程師

在過去一年中,我們的世界發生了巨大的變化,React Native 也不例外。我們歡迎新成員加入我們的團隊 (我們很高興最終能親自見到他們!),我們的專案已臻成熟,並且出現了新的機會。我們很高興在這篇文章和即將發表的其他文章中與您分享這一切!

在 Facebook,我們的團隊以半年為週期工作。每半年我們會檢視我們的策略、制定計畫,並在內部分享。今天,我們想與您,我們的社群分享我們下半年的計畫。

2021 年下半年對 React Native 來說是令人興奮的半年。我們的重點領域包括培育社群、開始向開放原始碼推出全新架構,以及推動技術向前發展。

React Native 0.65 公告

·3 分鐘閱讀時間
Luna Wei
Luna Wei
Meta 軟體工程師

今天我們發佈了 React Native 0.65 版,其中包含新版 Hermes、無障礙功能改善、套件升級及更多功能。

Hermes 0.8 的新功能?

Hermes 是 Facebook 針對 React Native 最佳化的開放原始碼 JavaScript VM,已升級至 0.8.1 版。此版本中的一些突出功能包括

您可以在這裡找到完整的 Hermes 變更記錄

請依照這裡的步驟,如果您尚未選擇讓您的應用程式加入 Hermes,以充分利用這些新功能和改進!

無障礙功能修正與新增功能

去年,Facebook 承諾 GAAD,以改善 React Native 中的無障礙功能。0.65 分享了此承諾的成果和其他無障礙功能的進展!一些值得注意的變更包括

  • 允許指定 iOS 的高對比淺色和深色值。如需更多詳細資訊,請參閱文件
  • 在 Android 上新增了 getRecommendedTimeoutMillis API。這會公開使用者在 Android 無障礙選項中設定的偏好預設逾時值,適用於可能需要額外時間來檢閱或觸及控制項等的使用者。
  • 一般修正,以確保 TalkBack/VoiceOver 正確宣告 UI 狀態,例如組件上的 disabledunselected

您可以在這裡追蹤或貢獻我們未解決的無障礙功能問題

值得注意的依賴版本更新與注意事項

  • 現在 package.json 中需要 react-native-codegen 0.0.7 版作為 devDependency
  • JCenter 已終止服務,現在為唯讀。我們已移除 JCenter 作為 Maven 儲存庫,並更新依賴項以使用 MavenCentral 和 Jitpack。
  • 將 OkHttp 從 v3 升級到 v4.9.1。如需變更的更多詳細資訊,請參閱升級到 OkHttp 4
  • 升級到 Flipper 0.93 以支援 Xcode 12.5。請參閱此處的 Flipper 變更記錄
  • Android Gradle Plugin 7 支援
  • Apple Silicon 需要連結器因應措施。請參閱@mikehardy 的說明,瞭解相關資訊。

感謝您!

此版本包含來自 61 位貢獻者的超過 1100 次提交。感謝所有貢獻和支援此版本的人!您可以在此處找到完整的變更記錄

GAAD 承諾 - 一年後

·4 分鐘閱讀時間
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承諾開放原始碼無障礙功能社群經理

自 Facebook 承諾 GAAD 承諾,讓 React Native 更易於存取以來已滿一年,且該專案已超出我們的預期。我們很高興宣佈,此專案將在整個 2021 年持續進行,並希望向大家更新我們目前的進度。在去年徹底分析 React Native 中的無障礙功能缺口之後,我們開始著手填補這些缺口。

我們從 90 個未解決的缺口分析問題開始,從 2021 年 3 月專案在 GitHub 上啟動至今

  • 社群已關閉 11 個問題。

  • React Native 團隊已評估並關閉 19 個問題。

  • 已合併 9 個提取請求。

  • 已將 1 個提取請求合併到 React Native 文件中。

我們要感謝 React Native 社群在過去一年中為實現更易於存取的 React Native 所做的重大進展。每位貢獻者的努力都有助於改善 React Native 無障礙功能。

GAAD 承諾 - 三月無障礙功能問題更新

·3 分鐘閱讀時間
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承諾開放原始碼無障礙功能社群經理

自我們向 GitHub 社群發佈經過徹底審查的缺口分析和問題清單,以改善 React Native 的無障礙功能以來,已經過去四週了。在 React Native 社群的協助下,我們在改善無障礙功能方面已取得重大進展。社群成員一直在協助貢獻者、審查測試,並關注先前的無障礙功能問題。自 3 月 8 日以來,社群已關閉六個問題,其中四個提取請求,另有七個提取請求正在等待審查。

在持續進行此項工作的同時,Facebook 的 React Native 和無障礙功能團隊正在評估在此計畫之前提交的無障礙功能錯誤和問題,以判斷它們是否已包含在我們目前的缺口分析中,或者是否有其他需要納入專案的問題。已發現一個新問題並已移至專案中,其他四個問題直接對應到現有問題,預計還有兩個問題將透過解決現有問題 (解決其問題的根本原因) 來關閉。

感謝所有參與的社群成員。您們確實正在推動進展,讓 React Native 對所有人更易於存取!

React Native 0.64 公告,iOS 版 Hermes

·4 分鐘閱讀時間
Mike Grabowski
Mike Grabowski
Callstack 技術長兼共同創辦人

今天我們發佈了 React Native 0.64,其中隨附 iOS 版 Hermes 支援。

iOS 版 Hermes 選擇加入

Hermes 是一個開放原始碼 JavaScript 引擎,針對執行 React Native 進行了最佳化。它透過減少記憶體使用量、縮減下載大小,以及縮短應用程式變得可用或「可互動時間」(TTI) 來改善效能。

在此版本中,我們很高興宣佈您現在也可以使用 Hermes 在 iOS 上進行建置。若要在 iOS 上啟用 Hermes,請在您的 Podfile 中將 hermes_enabled 設定為 true,然後執行 pod install

use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)

請記住,iOS 版 Hermes 支援仍處於早期階段。我們將其保留為選擇加入,因為我們正在進行進一步的基準測試。我們鼓勵您在自己的應用程式上試用,並告知我們其運作情況!

預設啟用內嵌需求

內嵌需求是 Metro 組態選項,可透過延遲 JavaScript 模組的執行,直到使用它們時才執行 (而不是在啟動時執行) 來改善啟動時間。

此功能已存在並建議作為選用組態選項存在數年,列在我們文件的效能章節中。我們現在預設為新應用程式啟用此選項,以協助人們擁有快速的 React Native 應用程式,而無需額外組態。

內嵌需求是一個 Babel 轉換,它會取得模組匯入並將其轉換為內嵌。例如,內嵌需求會將此模組匯入呼叫從檔案頂端轉換到其使用位置。

之前

import {MyFunction} from 'my-module';

const MyComponent = props => {
const result = MyFunction();

return <Text>{result}</Text>;
};

之後

const MyComponent = props => {
const result = require('my-module').MyFunction();

return <Text>{result}</Text>;
};

如需有關內嵌需求的更多資訊,請參閱效能文件

使用 Chrome 檢視 Hermes 追蹤

在過去一年中,Facebook 贊助了 Major League Hacking 獎學金,以支援對 React Native 的貢獻。Jessie NguyenSaphal Patro 新增了使用 Chrome DevTools 上的「效能」索引標籤來視覺化應用程式在使用 Hermes 時的執行情況的功能。

如需更多資訊,請查看新的文件頁面

搭載 Proxy 支援的 Hermes

我們已將 Proxy 支援新增至 Hermes,以實現與熱門社群專案 (例如 react-native-firebase 和 mobx) 的相容性。如果您一直在使用這些套件,現在可以將專案移轉至 Hermes。

我們計畫在即將發佈的版本中將 Hermes 設為 Android 的預設 JavaScript 引擎,因此我們正在努力解決人們在使用 Hermes 時遇到的剩餘問題。如果還有其他問題阻礙您的應用程式採用 Hermes,請在 Hermes GitHub 存放庫上開啟問題。

React 17

React 17 不包含面向開發人員的新功能或重大重大變更。對於 React Native 應用程式,主要變更是一個新的 JSX 轉換,讓檔案不再需要匯入 React 即可使用 JSX。

如需有關 React 17 的更多資訊,請參閱 React 部落格

重大依賴版本變更

  • 已捨棄 Android API 層級 16-20。Facebook 應用程式始終捨棄支援使用率非常低的 Android 版本。由於 Facebook 應用程式不再支援這些版本,且是 React Native 的主要測試介面,因此 React Native 也將捨棄支援。
  • 需要 Xcode 12 和 CocoaPods 1.10
  • 最低 Node 支援從 10 提升到 Node 12
  • Flipper 提升到 0.75.1

感謝

感謝數百位貢獻者協助促成 0.64!0.64 變更記錄包含此版本中包含的所有變更。

GAAD 承諾 - 改善 React Native 無障礙功能

·2 分鐘閱讀時間
Alexandra Marlette
Alexandra Marlette
React Native GAAD 承諾開放原始碼無障礙功能社群經理

您好,React Native 社群,

在 2020 年 5 月,Facebook 是第一家承諾 GAAD 承諾的公司,他們承諾讓無障礙功能成為 React Native 開放原始碼專案的核心部分。自 5 月以來,Facebook 花費了時間仔細審查和記錄 React Native 中的無障礙功能缺口。到目前為止,缺口分析已發現 90 個問題,所有問題都已轉換為 GitHub 問題

總體而言,我們發現 React Native API 為無障礙功能提供了強大的支援。但是,我們也發現許多核心組件尚未完全利用平台無障礙功能 API,並且缺少對某些平台特定功能的支援。

貢獻者的熱情和多樣性始終在 React Native 的開發中發揮關鍵作用,而這些無障礙功能缺口是當前和新貢獻者的絕佳機會。如果您一直有興趣為 React Native 做出貢獻,我們鼓勵您加入我們,讓 React Native 更易於存取。

為了表彰貢獻者的努力,當無障礙功能問題關閉並附加到提取請求時,貢獻者將從我們的社群經理那裡獲得 Twitter 上的讚揚。其提取請求被接受到程式碼庫中的貢獻者將在我們每月發佈在 React Native 部落格上的問題更新中獲得重點介紹。

請加入我們,讓 React Native 對所有人更易於存取。

您可以如何提供協助:

  • 新的貢獻者應閱讀貢獻指南,並瀏覽 React Native GitHub 中 46 個適合新手入門的問題清單。

  • 對需要更多努力的問題感興趣的貢獻者應造訪改善 React Native 無障礙功能專案頁面,以查看需要他們 React Native 知識的 GitHub 問題。

  • 有興趣更新 React Native 文件以反映正在關閉的無障礙功能缺口的技術作家應造訪 React Native 文件

  • 與任何可能提供協助的人分享此計畫!

  • TwitterFacebook 上追蹤 React Native GAAD 承諾開放原始碼無障礙功能社群經理,以隨時掌握最新進度。

React Native 文件更新

·3 分鐘閱讀時間
Rachel Nabors
Facebook 文件工程師

去年,我們進行了使用者訪談並發出了問卷調查,以深入瞭解人們如何以及何時使用 React Native 文件。透過從 24 次訪談和 3000 多份問卷回應中收集到的資料和指導,我們得以努力改善 React Native 的文件,並且我們很高興今天分享此進度

非常感謝所有參與訪談、問卷調查和文件工作的人!您的協作使這一切成為可能。

React Native 團隊原則

·5 分鐘閱讀時間
Eli White
Eli White
Meta 軟體工程師

Facebook 的 React Native 團隊以原則為指導,這些原則有助於判斷我們如何優先處理我們在 React Native 上的工作。這些原則特別代表我們的團隊,不一定代表 React Native 社群中的每位利害關係人。我們在此分享這些原則,以提高我們動機、決策方式以及我們如何專注於工作的透明度。

原生體驗

我們對 React Native 的首要任務是符合人們對每個平台的期望。這就是 React Native 呈現為平台基本元素的原因。我們重視原生外觀和風格,而不是跨平台一致性。

例如,React Native 中的 TextInput 會呈現為 iOS 上的 UITextField。這可確保與密碼管理員和鍵盤控制項的整合可立即運作。透過使用平台基本元素,React Native 應用程式也能夠與 Android 和 iOS 新版本中的設計和行為變更保持同步。

為了符合原生應用程式的外觀和風格,我們也必須符合它們的效能。這是我們投入最大雄心壯志的地方。例如,Facebook 建立了 Hermes,一個從頭開始為 Android 上 React Native 建置的全新 JavaScript 引擎。Hermes 顯著改善了 React Native 應用程式的啟動時間。我們也正在進行重大的架構變更,以最佳化執行緒模型,並使 React Native 更容易與原生程式碼互通。

大規模

Facebook 應用程式中的數百個螢幕是使用 React Native 實作的。Facebook 應用程式被數十億人在種類繁多的裝置上使用。這就是為什麼我們投資於大規模的最具挑戰性的問題。

在我們的應用程式中部署 React Native 讓我們能夠識別我們在較小規模下看不到的問題。例如,Facebook 專注於改善從最新 iPhone 到許多舊世代 Android 裝置的各種裝置的效能。此重點為我們的架構專案 (例如 Hermes、Fabric 和 TurboModules) 提供了資訊。

我們已證明 React Native 也可以擴展到大型組織。當數百名開發人員同時處理同一個應用程式時,逐步採用是必須的。這就是為什麼我們確保可以一次採用一個螢幕來採用 React Native。很快,我們將更進一步,並能夠將現有原生螢幕的個別原生檢視移轉到 React Native。

專注於大規模意味著我們的團隊目前未從事許多事情。例如,我們的團隊不推動業界採用 React Native。我們也不積極為我們在規模上看不到的問題建置解決方案。我們很自豪我們有許多合作夥伴和核心貢獻者能夠專注於社群的那些重要領域。

開發人員速度

出色的使用者體驗是反覆建立的。在執行的應用程式中看到程式碼變更的結果應該只需要幾秒鐘。React Native 的架構使其能夠在開發期間提供近乎即時的回饋。

我們經常從團隊那裡聽到,採用 React Native 顯著提高了他們的開發速度。這些團隊發現,開發期間的即時回饋使他們更容易嘗試不同的想法,並在他們不必為每個小變更中斷編碼工作階段時新增額外的潤飾。當我們對 React Native 進行變更時,我們會確保保留開發人員體驗的這種品質。

即時回饋並不是 React Native 提高開發人員速度的唯一方法。團隊可以利用快速成長的高品質開放原始碼套件生態系統。團隊也可以在 Android、iOS 和 Web 之間共用商業邏輯。這有助於他們更快地發佈更新,並減少平台團隊之間的組織孤島。

每個平台

當我們在 2014 年推出 React Native 時,我們以我們的座右銘「一次學習,隨處編寫」來呈現它,而我們的意思是任何地方開發人員應該能夠接觸到盡可能多的人,而不受裝置型號或作業系統的限制。

React Native 的目標平台非常不同,包括行動裝置、桌上型電腦、Web、電視、VR、遊戲主機等等。我們希望在每個平台上啟用豐富的體驗,而不是要求開發人員為最低公分母進行建置。為了實現此目標,我們專注於支援每個平台的獨特功能。這涵蓋了從不同的輸入機制 (例如觸控、筆、滑鼠) 到從根本上不同的消費體驗 (例如 VR 中的 3D 環境)。

此原則為我們決定以跨平台 C++ 實作 React Native 的全新核心架構提供了資訊,以促進跨平台的同等性。我們也正在完善針對其他平台維護者 (例如 Windows 和 macOS 的 Microsoft) 的公用介面。我們努力讓任何平台都能支援 React Native。

宣告式 UI

我們不相信在每個平台上部署完全相同的使用者介面,我們相信使用相同的宣告式程式設計模型公開每個平台的獨特功能。我們的宣告式程式設計模型是 React。

根據我們的經驗,React 推廣的單向資料流使應用程式更容易理解。我們傾向於將螢幕表示為宣告式組件的組合,而不是命令式管理的檢視。React 在 Web 上的成功以及新的原生 Android 和 iOS 架構的方向表明,業界也已接受宣告式 UI。

React 推廣了宣告式使用者介面。但是,仍然存在許多 React 獨特地定位來解決的未解決問題。React Native 將繼續建立在 React 的創新之上,並繼續走在宣告式使用者介面運動的最前沿。

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 中經過完整重新設計的 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 版本中,當使用這些已棄用的模組或方法時,我們會發出警告。請在 0.64 版本移除這些 API 之前,更新您的呼叫位置。

有關 LogBox 和 React Native 除錯的更多資訊,請參閱此處的文件。

Pressable

React Native 的建構旨在使應用程式能夠滿足使用者對平台的期望。這包括避免「破綻」——一些小細節會洩露體驗是使用 React Native 建構的。這些破綻的一個主要來源是 Touchable 元件:ButtonTouchableWithoutFeedbackTouchableHighlightTouchableOpacityTouchableNativeFeedbackTouchableBounce。這些元件透過讓您為使用者互動提供視覺回饋,使您的應用程式具有互動性。但是,由於它們包含與平台互動不符的內建樣式和效果,因此使用者可以分辨出體驗何時是用 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 的顏色。可以在 React Native 中使用 PlatformColor,如下所示

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 LaunchScreen 從 xib 變更為 storyboard:從 2020 年 4 月 30 日起,所有提交到 App Store 的應用程式都必須使用 Xcode storyboard 來提供應用程式的啟動畫面,並且所有 iPhone 應用程式都必須支援所有 iPhone 螢幕。此提交調整了預設的 React Native 範本,使其與此要求相容。

感謝

感謝數百位貢獻者讓 0.63 版本成為可能!

特別感謝 Rick Hanlon 撰寫了關於 LogBox 的章節,以及 Eli White 撰寫了本文的 Pressable 部分。

要查看所有更新,請查看 0.63 更新日誌

React Native 0.62 公告,搭載 Flipper

·5 分鐘閱讀時間
Rick Hanlon
Facebook React Native Core 團隊

今天我們發布了 React Native 0.62 版本,其中預設包含對 Flipper 的支援。

此版本在全球疫情期間發布。我們今天發布此版本是為了尊重數百位促成此版本的貢獻者的工作,並防止此版本落後 master 分支太多。請注意貢獻者協助處理問題的能力有所降低,並準備好在必要時延遲升級。

預設啟用 Flipper

Flipper 是一款用於除錯行動應用程式的開發人員工具。它在 Android 和 iOS 社群中很受歡迎,在此版本中,我們預設為新的和現有的 React Native 應用程式啟用了支援。

Screenshot of Flipper for React Native

Flipper 開箱即用提供以下功能

  • Metro Actions:直接從工具列重新載入應用程式並觸發開發人員選單。
  • Crash Reporter:檢視來自 Android 和 iOS 裝置的當機報告。
  • React DevTools:將最新版本的 React DevTools 與您的所有其他工具一起使用。
  • Network Inspector:檢視裝置應用程式發出的所有網路請求。
  • Metro 和裝置日誌:檢視、搜尋和篩選來自 Metro 和裝置的所有日誌。
  • 原生佈局檢查器:檢視和編輯 React Native 渲染器輸出的原生佈局。
  • 資料庫和偏好設定檢查器:檢視和編輯裝置資料庫和偏好設定。

此外,由於 Flipper 是一個可擴展的平台,它提供了一個從 NPM 提取外掛程式的市場,因此您可以發布和安裝特定於您的工作流程的自訂外掛程式。請參閱此處提供的外掛程式。

有關更多資訊,請查看 Flipper 文件

新的深色模式功能

我們新增了一個新的 Appearance 模組,以提供對使用者外觀偏好設定的存取權,例如他們偏好的配色方案(淺色或深色)。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark color scheme
}

我們還新增了一個 Hook 來訂閱使用者偏好設定的狀態更新

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
const colorScheme = useColorScheme();
return <Text>useColorScheme(): {colorScheme}</Text>;
};

請參閱 AppearanceuseColorScheme 的文件以取得更多資訊。

將 Apple TV 移至 react-native-tvos

作為我們 Lean Core 工作的一部分,並使 Apple TV 與其他平台(如 React Native Windows 和 React Native macOS)保持一致,我們已開始從核心中移除 Apple TV 特定的程式碼。

展望未來,React Native 的 Apple TV 支援將在 react-native-community/react-native-tvos 以及相應的 react-native-tvos NPM 套件中維護。這是主儲存庫的完整分支,僅包含支援 Apple TV 所需的變更。

react-native-tvos 的發布將基於 React Native 的公開發布版本。對於此 0.62 版本的 react-native,請升級 Apple TV 專案以使用 react-native-tvos 0.62。

更多升級支援

當 0.61 版本發布時,社群推出了一個新的 升級助手工具,以支援開發人員升級到新版本的 React Native。升級助手提供了從您目前版本到目標版本的變更差異,讓您可以查看特定升級需要進行的變更。

即使使用此工具,升級時也會出現問題。今天,我們透過宣布 Upgrade-Support 來引入更多專門的升級支援。Upgrade Support 是一個 GitHub 問題追蹤器,使用者可以在其中提交特定於升級專案的問題,以獲得社群的幫助。

我們一直在努力改善升級體驗,並且我們希望這些工具能夠在我們尚未涵蓋的邊緣案例中為使用者提供他們需要的支援。

其他改進

  • LogBox:我們正在新增新的 LogBox 錯誤和警告體驗作為可選擇啟用的功能;要啟用它,請將 require('react-native').unstable_enableLogBox() 新增到您的 index.js 檔案中。
  • React DevTools v4:此變更包含升級到 最新的 React DevTools,它提供了顯著的效能提升、改進的導航體驗以及對 React Hooks 的完整支援。
  • 輔助功能改進:我們對輔助功能進行了改進,包括新增 accessibilityValueTouchables 上遺失的 props、onSlidingComplete 輔助功能事件,以及將 Switch 元件的預設角色從 "button" 變更為 "switch"

重大變更

  • 移除 PropTypes:我們正在從核心元件中移除 propTypes,以減少 React Native 核心對應用程式大小的影響,並傾向於在編譯時而不是執行時檢查的靜態類型系統。
  • 移除 accessibilityStates:我們移除了已棄用的 accessibilityStates 屬性,轉而使用新的 accessibilityState prop,這是一種語義更豐富的方式,讓元件可以向輔助功能服務描述有關其狀態的資訊。
  • TextInput 變更:我們從 TextInput 中移除了 onTextInput ,因為它不常見、不符合 W3C 標準,並且難以在 Fabric 中實作。我們也移除了未記錄在案的 inputView prop 和 selectionState

棄用

  • AccessibilityInfo.fetch 已經被棄用,但在這個版本中,我們新增了一個警告
  • 現在需要設定 useNativeDriver 才能支援未來切換預設值。
  • Animated 元件的 ref 現在是內部元件,並且棄用getNode

感謝

感謝數百位貢獻者讓 0.62 版本成為可能!

要查看所有更新,請查看 0.62 更新日誌