【0.48】React Native 中文更新日誌

• 本文爲 Marno 原創，轉載必須保留出處！
• 公衆號【 aMarno 】，關注後回覆 RN 加入交流羣
• React Native 優秀開源項目大全：www.marno.cn

1、導讀

---

翻譯更新文檔真是一件特別枯燥無聊的事情，還會佔用大量的業餘時間，可是爲了翻譯的儘可能準確，我會詳細查看每個更新的內容，而後結合修改的代碼和更新說明再進行翻譯。儘管如此有時候仍是可能出現翻譯的不太準確的地方，但願你們能夠諒解。若是發現有翻譯不許確的地方，能夠經過留言或者關注個人公衆號聯繫我進行修改。

此次更新對 iOS 的變更要大一些，新增了一個組 MaskedViewIO，還在
Guides (IOS) 中添加了 App Extensions 相關的內容，具體使用能夠到官網看下。還有就是大量重構了 TextInput 相關的代碼，合併了不少屬性，除此以外還爲適配 iOS11 作了一些改動，具體能夠看詳細的更新日誌。

2、通用

---

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: 爲 組件增長示例代碼，說明如何經過 'data' 來展現圖片
• Docs: 修改側邊菜單 IntegrationWithExistingApps.md 中示例代碼的項目名稱
• Docs: 將示例代碼中經過 pod 導入文件的路徑改成單引號包裹
• Docs: 在 sectionList 中儘管·1使用了 keyExtractor 方法，仍須要單獨爲整個 section 設置 key
• Docs: 將 Animated 添加到 ComponentsAndAPIs 欄目的 Others 分類下
• Docs: 爲 ScrollView.js 中的 onMomentumScrollEnd 屬性添加說明文檔
• Docs: 爲 ScrollView.js 中的 onMomentumScrollBegin 屬性添加說明文檔

3、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 尺寸拆分開，就不會發生這樣的狀況了。

4、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 方法
• 傳遞實際加載的圖片尺寸用於加載

  組件加載圖片時，能夠在 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 項目中的圖片資源

---