今天我們很高興發布 React Native 0.76！
這是 React Native 的一個重要里程碑，因為我們默認啟用了新架構，并引入了 React Native DevTools。這是我們團隊經過 6 年努力，與我們令人難以置信的開發者社區共同支持的成果。
亮點
- 默認啟用 React Native 新架構
- 引入 React Native DevTools
- 更快的 Metro 解析
- 支持 Box Shadow 和 Filter 樣式屬性
重大變更
- 移除了對 react-native-community/cli 的依賴
- 通過合并原生庫，Android 應用減少了約 3.8MB
- 更新了最低 iOS 和 Android SDK 要求
亮點詳解
默認啟用 React Native 新架構
從 React Native 0.76 開始，默認在您的項目中啟用新架構。新架構是對 React Native 內部的一次重寫，使應用開發者能夠使用 React 構建高質量的原生應用程序。
今天，我們很高興宣布新架構已準備好投入生產使用。
這一變化是 React Native 發展中的一個重要里程碑，我們邀請您閱讀專門的博客文章，了解新架構的具體內容以及它將如何塑造 React Native 的未來：新架構來了。
React Native DevTools
我們發布了 React Native DevTools 的第一個穩定版本，這是我們新的默認調試體驗。
我們希望您使用的調試工具在所有平臺上都能保持可靠、熟悉、簡單且一致。React Native DevTools 實現了這些原則 —— 它是一款與 React Native 深度集成的瀏覽器風格的開發者工具。主要功能包括：
- 熟悉的、與 Web 對齊的工具 —— 基于 Chrome DevTools 的全功能調試器，具有可靠的斷點、監視值、逐步調試、堆棧檢查和豐富的 JavaScript 控制臺。這些核心功能現在可以在重新加載時穩定工作。
- 改進并集成了 React DevTools —— 內置的 React 組件檢查器和性能分析工具無縫運行，組件高亮顯示更快、更可靠。
- 改進的用戶體驗 —— 新的“Paused in Debugger”覆蓋層，明確顯示應用程序何時在斷點上暫停。LogBox 中的警告現在以摘要形式顯示，并在 DevTools 連接時隱藏。
- 修復了重新連接行為 —— JavaScript 斷點現在在重新加載和 DevTools 斷開后重新連接時可以可靠工作。DevTools 甚至可以在原生重建后重新連接到同一個應用。
- 即時啟動 —— React Native DevTools 默認配置即可使用。可以從應用內的開發菜單或通過命令行的
j命令打開進行調試，CLI 服務器現在支持多個模擬器和設備。
React Native DevTools 與我們之前的調試選項有根本的不同，包括與 0.73 首次推出的實驗性調試器體驗的不同。它切換到了一個全新的后端調試棧，這是我們在過去一年里重建的。這意味著與之前工具的兼容性有所變化，您應該會體驗到更可靠的端到端調試體驗。我們計劃基于這個新棧構建更多功能，比如性能和網絡面板。
逐步淘汰 Metro 日志
在我們下一次發布中，我們將刪除 Metro 中的轉發日志，以與現代瀏覽器工具保持一致，移除舊的調試集成。請改用 React Native DevTools 的全功能控制臺面板進行日志記錄。詳見我們的常見問題解答。
鏈接
更快的 Metro 解析
我們對 Metro 的解析器（負責從導入路徑中查找模塊的組件）進行了多項性能優化，使其速度提高了大約 15 倍。這顯著提升了 Metro 的整體性能，特別是在增量構建（warm builds）時，速度提高了約 4 倍。
Box Shadow 和 Filter 樣式屬性
在 0.76 版本中，我們新增了兩個僅在新架構中支持的樣式屬性 —— boxShadow 和 filter。這兩個屬性都在 Web 上存在，并且團隊在可能的情況下堅持符合規范，使這些屬性更為可預測、熟悉，并且最終更容易采用（有關例外情況，請參閱“限制和規范偏差”部分）。因此，您可以查閱 Web 文檔，全面了解它們的工作方式，但仍有一些重要的差異需要注意。
boxShadow
boxShadow 為元素添加陰影，并可控制陰影的位置、顏色、大小和模糊度。您可以查閱 MDN 文檔，全面了解每個參數的功能，并嘗試自己動手操作。以下是一些您可以創建的陰影示例。
- 新的
boxShadow樣式屬性
boxShadow可以接受字符串格式（模仿 CSS 語法）或包含變量的 JavaScript 對象。例如，字符串'5 5 5 0 rgba(255, 0, 0, 0.5)'和對象{offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5)'}將產生相同的陰影效果。
之前的陰影功能存在一些不足之處，而這些不足現在通過 boxShadow 得到了改進：
- 不支持 Android
- 不能設置為內陰影（inset）
- 沒有擴展距離
- 在沒有背景色的視圖上無法工作
- 是單獨的屬性，因此無法與 Web 語法共享
限制與規范偏差
- 默認的陰影顏色是黑色，而不是父元素的顏色
- Android 常規陰影支持 Android 9 及以上版本
- Android 內陰影支持 Android 10 及以上版本
filter
filter 為元素添加某些圖形濾鏡。它包括修改亮度、飽和度和色調的顏色濾鏡，以及添加模糊和陰影等的非顏色濾鏡。您可以查閱 MDN 文檔，全面了解每個濾鏡函數，并嘗試自己操作。以下是一個應用了不同濾鏡的熱狗圖片示例。
濾鏡演示
從左到右：無濾鏡，飽和濾鏡，模糊濾鏡，反轉濾鏡
與 boxShadow 類似，filter 可以接受字符串（模仿 CSS 語法）或包含變量的 JavaScript 對象數組。例如，字符串 'saturate(0.5) grayscale(0.25)' 和數組 [{saturate: 0.5}, {grayscale: 0.25}] 將產生相同的濾鏡效果。filter 有一個 dropShadow 值，與 boxShadow 略有不同。最大的差異在于 dropShadow 是一個 alpha 蒙版 —— 只有 alpha 值不為零的像素才會投射陰影。而 boxShadow 會圍繞元素的邊框框投射陰影，即使里面沒有內容。此外，dropShadow 沒有擴展距離參數，也不能設置為內陰影（陰影投射到元素內部）。
限制與規范偏差
- iOS 的
filter僅支持亮度和不透明度 - iOS 的
filter不會應用于陰影、輪廓或任何元素邊界外的圖形元素 - Android 的模糊和投影陰影僅支持 Android 12 及以上版本
-
filter隱含overflow: hidden，因此帶有濾鏡的元素的子元素，如果超出父元素邊界將被裁剪
重大變更
移除了對 @react-native-community/cli 的依賴
如在 0.75 版本中所述，我們的愿景是讓 React Native 與框架無關。因此，我們完成了移除 @react-native-community/cli 作為 React Native 直接依賴項的工作。
將 React Native 與 CLI 解耦使我們能夠更快地獨立發布這些項目，并更好地劃分兩者的職責。
如果您在日常工作中依賴 CLI，請確保在您的 package.json 中顯式添加對 CLI 的依賴：
"devDependencies": {
"@react-native-community/cli": "15.0.0",
"@react-native-community/cli-platform-android": "15.0.0",
"@react-native-community/cli-platform-ios": "15.0.0"
},
通過原生庫合并，Android 應用減少了約 3.8MB
React Native 0.76 發布時減少了原生庫數量，因為我們將大量的原生代碼合并到一個名為 libreactnative.so 的庫中。
這一更改帶來了應用體積的縮減和 Android 應用啟動性能的提升。根據我們的基準測試，應用體積將減少約 3.8MB（總量的 20%），應用啟動時間中位數將減少約 15 毫秒（約 8%）。
另一方面，這對應用和庫開發者來說是一次重大變化。
應用開發者需要按如下方式更新 Application 的 onCreate 方法：
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
SoLoader.init(this, OpenSourceMergedSoMapping)
}
}
此更改對于正確加載 libreactnative.so 是必要的，并已包含在升級助手中。
除非您有自定義 C++ 代碼，否則庫作者不會受到此更改的影響。
有關此更改的技術深入解讀，以及對庫作者的建議，請閱讀專門的文章。
最低 iOS 和 Android SDK 要求的更新
我們更新了最低平臺和 SDK 版本：
- iOS：從 13.4 升級到 15.1
- Android：從 SDK 23 升級到 SDK 24（Android 7）
此更改已在今年早些時候的 0.75 版本發布時宣布。有關更多背景信息，請參閱專門針對 Android 和 iOS 的文章。
其他重大變更
動畫
- 停止在循環動畫中向 React 發送狀態更新。這會導致循環動畫的不必要重新渲染。
開發工具：
- 在新架構中移除了 Inspector Panel 中的性能和網絡標簽。（RFC）
文本引擎
- 在 TextLayoutManager 中始終使用
AttributedStringBox代替AttributedString。
Android
-
渲染：視圖背景不再直接是
ReactViewBackgroundDrawable或CSSBackgroundDrawable。
iOS
-
Turbo 模塊：移除了用于自動鏈接純 Cxx 模塊的
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL宏。
鳴謝
React Native 0.76 包含來自 156 位貢獻者的 1070 多個提交。感謝你們的辛勤工作！
感謝所有為本發布文檔撰寫功能的額外作者：
- Joe Vilches 和 Nick Gerleman：box-shadow 和 filter 樣式屬性。
- Alex Hunt：React Native DevTools。
- Nicola Corti：Android 作為單個庫發布。
升級到 0.76
請使用 React Native 升級助手查看不同版本之間的代碼變更，參考升級文檔以幫助現有項目升級。
如果你使用 Expo，React Native 0.76 將在 Expo SDK 52 中得到支持。
如果你需要使用 CLI 創建新項目，可以運行以下命令：
npx @react-native-community/cli@latest init MyProject --version latest
提示：0.76 現在是 React Native 的最新穩定版本，0.73.x 已不再支持。有關更多信息，請參閱 React Native 的支持政策。我們計劃在不久的將來發布 0.73 的最終生命周期結束更新。
