【0.48】React Native 中文更新日誌

Marno發表於2019-02-27
React Native
  • 本文為 Marno 原創，轉載必須保留出處！
  • 公眾號【 aMarno 】，關注後回覆 RN 加入交流群
  • React Native 優秀開源專案大全：www.marno.cn

一、導讀

翻譯更新文件真是一件特別枯燥無聊的事情，還會佔用大量的業餘時間，但是為了翻譯的儘量準確，我會詳細檢視每一個更新的內容，然後結合修改的程式碼和更新說明再進行翻譯。儘管如此有時候還是可能出現翻譯的不太準確的地方，希望大家可以諒解。如果發現有翻譯不準確的地方，可以通過留言或者關注我的公眾號聯絡我進行修改。

這次更新對 iOS 的變動要大一些，新增了一個組 MaskedViewIO，還在
Guides (IOS) 中新增了 App Extensions 相關的內容，具體使用可以到官網看下。還有就是大量重構了 TextInput 相關的程式碼，合併了很多屬性，除此之外還為適配 iOS11 做了一些改動，具體可以看詳細的更新日誌。

二、通用

2.1 重大變化

  • 使 RCTDeviceEventEmitter 報致命性的警告

    之前如果 RCTDeviceEventEmitter 中出現錯誤，會通過 console.warn() 方式來提醒，現在如果發生錯誤，會直接通過 throw new Error() 方式丟擲錯誤。

  • 移除 RCTUIManager.h 檔案中 3 個不再使用的通知（iOS）

  • 移除了官方 APIs 中的 AdSupportIOS（iOS）

    官方解釋是為了集中精力提供更多高質量的元件，會逐漸移除那些不屬於該範疇內的一些 API 和 Component。但是如果你的專案中用到了該元件，可以繼續從 react-native-deprecated-modules 中引用該元件（以往移除的一些元件也都可以在這裡找到），或者使用後面推薦的這個庫來代替： github.com/ptomasroos/…

2.2 修復 Bug

  • 修復 JSClassCreate 的錯誤呼叫
  • 修復由於解決 #14684 問題時無意間引起的副作用

    之前在解決 SwipeableRow.js 與 react-navigation 的手勢衝突時，導致了一個黃盒警告，現在已經解決了。記得之前有提到過 SwipeableRow 這個元件，是一個實驗性元件，想了解的可以翻下 0.47 的更新日誌

  • 修復 CLI 中缺少 "getPolyfills" tag 的問題
  • 修復 不能正常巢狀在 元件中的錯誤
  • Yoga: Fixing edge case issue in Yoga where text node was unnecessary rounded down
  • Yoga: Reset the hadOverflow flag at the beginning of the algorithm
  • Docs: 修復 Linking.js 註釋中的拼寫錯誤
  • Docs: 修復 Animations.md 中的拼寫錯誤
  • Docs: Fix mistake acquireWakeLockNow in headless js section
  • Docs: 修改 元件的文件中的示例程式碼

    之前版本的示例程式碼讓人以為 title 是 section 的必須欄位，但實際上不是，所以在文件的示例程式碼中刪除了
    title 欄位。

  • Docs: 修改 元件的 backgroundColor 屬性的值型別為 string
  • Docs: 修復文件中不完整的連結地址
  • Docs: Fix navigation menu regression on mobile
  • Docs: 修正 FlatList.js 類註釋種的語法錯誤
  • Docs: 修改文件中不規範的縮排

2.3 新特性

  • 為 WebSocket 新增 Blob 實現 ，使 WebSocket 支援二進位制資料的傳遞
  • 在 __fbBatchedBridge is undefined 的報錯資訊中新增可能導致該錯誤出現的原因
  • 新增缺少的 assetRegistryPath 命令到 dependencies command
  • 為 Animated.spring 新增一個 delay 屬性，以推遲動畫的開始時間
  • 為 TouchableHighlight 啟用 flow
  • 將 KeyboardAvoidingView 元件中的屬性抽取到了ViewPropTypes.js 中統一管理
  • 將 application/javascript 與 text/javascript 都新增為 packager 支援載入的 bundle 的型別
  • 新增 CODEOWNERS 檔案方便自審查 PR 的程式碼
  • 移除了一些不再使用的 npm 依賴庫，並且新增了一個 babel-plugin-transform-flow-strip-types 的新依賴
  • 將所有檔案中的 React.createClass 替換成 create-react-class 包中的 createReactClass 方法

    之前的版本更新中就已經將 React.createClass 移除了，所以大家有用到 React.createClass 的，或者下載的三方庫中有用到的，記得去替換下。

  • SwipeableRow: 新增屬性可設定禁用左滑或者右滑的事件，以解決和 react-navigation 滑動返回的衝突
  • VirtualizedList: 調整了 getItemLayout 的臨界值，使列表可以滾動到最後一項
  • 在 Linux 平臺上新增支援通過 chromium 使用 devTools 進行 RN 應用除錯
  • 將 polyfills 重新移回到 react-native 中
  • 修改了 PushNotificationIOS 元件中拼寫錯誤的屬性名
  • 將 throat 依賴從 3.0.0 更新到 4.1.0
  • 將 inspector proxy 從 packager 移走
  • 在 ReactNativeART.js 避免反覆建立新的 Path 示例導致效能降低
  • 將 runServer.js 中的 polyfills 改為 getPolyfills() 以提高可配置性
  • 嘗試將 React DevTools 主題和現在 Nuclide 主題統一
  • 將 Jest 版本從 20.1.0-alpha.3 更新至 20.1.0-chi.1
  • 在 CLI 命令列工具中新增了 info 命令，可以顯示 react-native 相關資訊，使用方法為：react-native info
  • 移除 TouchableOpacity 元件中與 focusedOpacity 相關的屬性和方法
  • 移遺留的 JSC profiler
  • 將 Flow 從 0.49.1 更新到 0.50.0 版本
  • 移除 metro-bundler 中預設的 polyfills
  • 設定值時停止 native 驅動的動畫
  • 更新 metro-bundler 版本從 0.9.0 到 0.10.0
  • 將 transform 速度提高 8.5%
  • 將 RCTDevMenu.m 中的 Hide/Show Inspector重新命名為 Toggle Inspector
  • 在核心程式碼初始化時使 Set 和 Map 懶載入
  • 統一了 NetInfo API 在兩個平臺上的返回欄位，並且提供方法判斷當前連線的網路頻段是 2g/3g/4g
  • 移除了 ScrollView 元件中的 onScrollAnimationEnd 屬性
  • 將 JSTimers 的 requires 設為內聯方式
  • 為不同平臺下的 View props 新增 hook
  • 移除 JSCTracing.cpp 中不再使用的 nativeTrace*stage 方法
  • 在 runServer.js 中新增屬性和方法，用來控制 Metro 是否通過 Babel 去查詢 .babelrc 檔案
  • 為 MessageQueue.spy 輸出的日誌資訊多新增了一些資訊
  • Docs: 修復了 StatusBar 元件文件中某些屬性錨點連結跳轉不正確的問題
  • Docs: 修改 Navigation.md 文件，將 NavigatorIOS 的 push 方法所接收的引數型別變成 route 物件，併為其新增 passProps 屬性
  • Docs: 修改 Headless 文件，新增如何傳遞引數的示例程式碼
  • Docs: 在 Performance.md 文件中說明， Animated API 預設在 JS 執行緒進行計算，但設定了
    useNativeDriver 屬性後則會在 Native 執行緒計算（這也是提高動畫流暢度的一種方式，感興趣可以搜一下，網上有相應的文章）
  • Docs: 修改 IntegrationWithExistingApps.md 文件中示例程式碼中的專案名稱，舊版本中前後名稱不一致，init 時使用的是 MyReactNativeApp ，但是註冊的時候使用的是 HelloWorld
  • Docs: 更新 Transforms 的文件，標明瞭哪些屬性已經過期；並且對各屬性的值型別做了說明，標明哪些需要傳入 string，哪些需要傳入 number
  • Docs: 為 設定 animationType 屬性時傳入的值不用再使用 {} 包裹
  • Docs: 將 ReactImageView 中 setSrc() 方法的引數由 String 改為 ReadableArray
  • Docs: 在文件中明確說明了 FlatList 繼承了所有 ScrollView 的屬性
  • Docs: 給 TouchableWithoutFeedback.js 中的 onPressIn 和 onPressOut 屬性新增說明
  • Docs: 更新 podspec 整合說明，在 >=0.47 的版本中需要引入 CxxBridge
  • Docs: 在 ListView 的文件中新增了一些使用說明，具體如下：
    1. 在水平的 ListView 中 header 和 footer 是如何渲染的（header在左，footer 在右）
    2. 新增如何使用 cloneWithRowsAndSections 的示例程式碼
    3. 為 getRowCount() 和 getRowAndSectionCount() 方法新增說明
  • Docs: 之前新增了 元件後沒有更新 Image 文件中相關的說明，這次將這部分說明及示例程式碼都更新了
  • Docs: 澄清了如果在 OC 程式碼中的類以 RCT 為字首，在 JS 層呼叫的時候應該排除掉字首。
  • Docs: 澄清在 Android 平臺上 ScrollView 的 pagingEnabled 僅支援橫向

    之前的文件沒有誤讓人以為 pagingEnabled 在雙平臺都支援橫向、豎向模式，但其實在 Android 上不支援豎向模式。

  • Docs: 為 【0.48】React Native 中文更新日誌 元件增加示例程式碼，說明如何通過 'data' 來展示圖片
  • Docs: 修改側邊選單 IntegrationWithExistingApps.md 中示例程式碼的專案名稱
  • Docs: 將示例程式碼中通過 pod 匯入檔案的路徑改為單引號包裹
  • Docs: 在 sectionList 中儘管·1使用了 keyExtractor 方法，仍需要單獨為整個 section 設定 key
  • Docs: 將 Animated 新增到 ComponentsAndAPIs 欄目的 Others 分類下
  • Docs: 為 ScrollView.js 中的 onMomentumScrollEnd 屬性新增說明文件
  • Docs: 為 ScrollView.js 中的 onMomentumScrollBegin 屬性新增說明文件

三、Android

修復 Bug

  • 修復在使用某些角度旋轉圖片時使其邊緣產生鋸齒的問題
  • 修復當呼叫圖片剪裁時給 displaySize 屬性設定 float 型別的值時導致的奔潰
  • Fixed new line and prioritise blurOnSubmit in multiline text input
  • 修復 HEAD 請求方式失敗的問題
  • 修復當初始化後再去更新 z-index 屬性無效的問題
  • 將 WebSocket 模組中接收到的二進位制訊息轉換為 base64 而非 utf-8 格式

新特性

  • 在 Headless JS 文件中新增說明，提示使用者記得將 service 新增到 AndroidManifest 中
  • 將 ReactWebViewManager.java 類中的方法和變數的許可權修飾符由 private 改為 protected
  • 支援為 ARTSurfaceView 設定背景色
  • 為 Arguments.java 類中新增了一些新功能，具體如下

    1.新增了 ReadableArray 轉換成 ArrayList 的方法
    2.新增了 List 轉換成 WritableArray 的方法
    3.修改了 toBundle 方法，使其支援 arrays
    4.修改了 fromBundle 方法，使其支援 lists

  • 在 DrawerLayoutAndroid 文件中新增如何呼叫 openDrawer 和 closeDrawer 方法的說明
  • 將 Native Modules Android 文件中涉及到的 ToastAndroid 名字換成 ToastExample

    在該文件中所說的 ToastAndroid 並非 API 中提供的那個，而只是為了演示 Android 原生 Toast 如何使用而建立的名字，所以為了避免混淆，乾脆將其改名為 ToastExample。

  • 簡化 MethodInvoker.cpp 中的巨集的使用
  • 升級了 Fresco 相關依賴的版本(從1.0.1 > 1.3.0 )
  • 劇烈搖晃手機 2 次後顯示 DevMenu
  • 在 drawable 載入完成後再進行 ToolbarAndroid 佈局
  • 將 ReactInstanceManagerBuilder.java 類中的成員變數由 protected 變成 private
  • 為 CxxModule.h 中的 getConstants 方法提供預設實現
  • 刪除 settings.gradle 檔案中已經不存在的 module 的引用
  • 在清理記憶體快取前先檢查 fresco 是否完成初始化
  • 將 window 的尺寸和螢幕 orientation 區分開

    在某些情況下，裝置是豎屏的，但是獲取到的 window 的尺寸卻是橫屏的尺寸，這是因為當裝置方向發生變化時，尺寸更新事件從 ReactRootView 獲取到了錯誤的尺寸。現在將 window 尺寸和 screen 尺寸拆分開，就不會發生這樣的情況了。

四、iOS

修復 Bug

  • 修復 legacy React bridge 中的 build-break
  • 修復因為使用不支援的裝置方向 event 而導致的奔潰
  • 修復拼寫錯誤，之前將 UIKit 寫成了 UIKIt
  • 修復 RCTNetworking 錯誤資訊
  • 修復字型 weight 屬性解析度
  • 修復當使用 元件選擇的照片沒有 orientation 資訊的問題
  • 修改 RCTDevSettings.mm 種的語法錯誤
  • 修復當使用 UIDeviceOrientation 時 tvOS 的構建問題

新特性

  • Podspec: 新增所需的 "DevSupport" 依賴 "InspectorInterfaces.{cpp,h}
  • 新增代理 hook 以提供不同的 JS 實現
  • 為 builds 新增 FORCE_BUNDLING、SKIP_BUNDLING 標記來區分是真機還是虛擬機器
  • 為 ScrollView 新增 contentInsetAdjustmentBehavior 屬性來適應 IPhone X 的“劉海”
  • 移除不再使用的 RCTDebugComponentOwnership.js
  • 移除過時的 RCTAssert 別名
  • 將 RCTCxxBridge.mm 中的 [RCTConvert folly_dynamic:] 直接更名為 convertIdToFollyDynamic
  • 為 ViewManager 新增繼承支援

    在 Android 已經早就支援繼承來擴充套件功能，但是 iOS 還沒有，所以之前想要自定義 ViewManager ，只能自定義一個，然後複製之前的程式碼，再把自己擴充套件的程式碼加上。

  • 新增元件 MaskedViewIOS：可以為元件新增一個透明的遮罩
  • Generalize/refactor -[RCTUIManager rootViewForReactTag:withCompletion:]
  • RCTScrollEvent: get all required values injected rather than accessing the scroll view
  • 引入 RCTBackedTextInputDelegate 用於管理 RCTTextField 和 RCTTextView 相同的程式碼
  • ScrollView: 從 RCTCustomScrollView 中移除多個不必要的邏輯檢查
  • 將 RCTUIManager.m 中的 RCTAssertThread 和 RCTAssert 統一替換為 RCTAssertUIManagerQueue 方法
  • 傳遞實際載入的圖片尺寸用於載入

    【0.48】React Native 中文更新日誌元件載入圖片時，可以在 onLoad 回撥方法中獲取圖片的大小，但是這一方法在 iOS 上經常不能正確的回掉真實的圖片尺寸，現在對這一回撥進行了優化。

  • 在 RCT_DEBUG 模式下使 js 堆大小為之前 2 倍
  • 簡化 RCTModuleMethod 中的 processMethodSignature
  • 從 RCTRootView 中移除無用的 _launchOptions
  • 使用 Apple 釋出的有顯著變化 API

    這裡主要是對定位許可權的一些修改，以適應 iOS11 的體驗

  • 新增對 namedOrientationDidChange 支援
  • RCTCxxBridge: 使用 C++ atomic
  • RCTImage: 使用 C atomics 代替 OSAtomic
  • RCTProfile: 使用 C atomics 代替 OSAtomic
  • 顯示 bundle 傳送到手機上的進度，此進度並不是之前已經有了的 packager 轉換的進度
  • 通過 packager 對 bundle 的內容型別進行驗證
  • 在 CameraRoll 新增屬性支援獲取其中視訊的持續時長
  • TextInput：將 setSelection 方法提取到基類中
  • TextInput：將 RCTTextField.m 和 RCTTextView.h 中的多個屬性統一提取到了 RCTTextInput.m 中

    主要包括 blurOnSubmit、clearsOnBeginEditing、clearTextOnFocus

  • TextInput: 為了更好的解耦，已將與 textInputDidChange 相關的程式碼移到了介面卡中
  • TextInput: 實際的 reactAccessibilityElement 實現
  • TextInput: 統一了單行和多行輸入文字中的 selection 屬性，並且完善了 selection 事件的處理
  • TextInput: 將 textInputShouldEndEditing 和 textInputDidEndEditing 移到了基類中
  • TextInput: 簡化 selectTextOnFocus 內部邏輯
  • TextInput: 精簡 contentSize 計算方式
  • ScrollView/TextInput: 將滾動區域限制到有內容的區域
  • ScrollView: 使用自動調整尺寸的 masks 進行 UIScrollView 的實際佈局
  • ScrollView: 更智慧的保持 contentOffset

    之前當 ScrollView 在豎屏狀態下滾動到最後一項時，將裝置旋轉至橫屏，ScrollView 並不會停留再最後一項，這個 PR 就修復了這個問題

  • 為 WebView 的 window.postMessage 新增佇列機制，不會讓兩個時間特別接近的事件發生丟失
  • 支援 shadowView.rootView
  • 為 Apple TV 的 RN 專案新增 Cocoapods 支援
  • Debugger 通道訊息應該只在後臺執行緒中進行處理
  • 使用靜態方法代替部分 export 匯出的方法
  • 將非外部的 string 變數標記為 static
  • CameraRoll: 使用 C atomic 代替 OSAtomic
  • 更高效的動態 ->NSString 轉換
  • 降低網路連線錯誤的日誌級別
  • Apple TV: 新增在遙控器長按播放鍵開啟 dev 選單的功能
  • 統一修改工程中 tab 縮排為兩個空格
  • Docs: 更新了 Native UI Components 中與地圖元件相關的說明和示例程式碼
  • Docs: 新增了 App Extensions 相關文件，指導開發者在手機通知欄中新增部件

推薦閱讀

  1. 【0.47】React Native 中文更新日誌
  2. 【0.46】React Native 中文更新日誌
  3. 如何高效管理 React Native 專案中的圖片資源

相關文章