React Native在2017年經歷了眾多版本的迭代，從本人接觸的0.29版本開始，到前不久發布的0.52版本，React Native作為目前最受歡迎的移動跨平臺方案。雖然，目前存在著很多的功能和性能的缺失，但是不可否認的是React Native確實在進步。

本文主要從以下幾個方面來對React Native0.50+進行講解：

• 在兼容性方面新增了對Android8.0、iPhone X的支持；
• 在API方面為TimePicker添加了打開方式的API，另外允許在構建Android項目的時候指定applicationId;
• 在組件方面，新添加了支持側滑顯示菜單的SwipeableFlatList，以及SafeAreaView。
• 修復了一些關鍵性的Bug；

Image組件

React Native 0.50版本中 Image組件迎來了比較大的一個特性的改變，即在React Native 0.50及以上版本中Image不在支持包裹內容。例如：

<Image style=resizeMode="center"source=><Text>《React Native移動開發實戰》</Text> </Image>

以上代碼在0.50之前是可以正常運行的，在0.50上運行會報：

Unhandled JS Exception: Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

如果要在0.50+版本中使用Image組件，可以按照下面的用法：

<Image style=resizeMode="center"source=/><Text>《React Native移動開發實戰》</Text>

其他重大變更

ReactShadowNode由類被抽象成了接口，代替他的是ReactShadowNodeImpl，這是來自底層的變更，對上層API無影響。

enableBabelRCLookup(啟用BabelRCL查找)，由原來的默認開啟改為了默認關閉，改過之后Metro只會關注項目的.babelrc文件。在之前Metro會關注node_modules下的.babelrc文件，這樣將會導致一些問題，因為它沒有Babel的版本，也沒有node_modules/randompackage/.babelrc所需的plugins/presets。現在，從0.50版本之后getEnableBabelRCLookup默認返回false，從而避免了這一問題。如果你不想使用這一改變，那么可以這樣配置：

創建一個rn-cli.config.js文件，并添加：

module.exports = {getEnableBabelRCLookup() {return true;},};

然后，在node_modules下修改.babelrc :

{"plugins": ["dummy"]}

修復的系統bug

在0.50版本中，修復的系統bug有：

Android

1，修復了在Android SDK 15及以下版本設置背景的Bug。在Android中設置View的背景在SDK15及以下和以上和的API是不一樣的，在之前的RN版本中沒有做差異判斷，所以會導致在低版本設置背景的Bug，在0.50及以上版本底層實現上添加了ViewHelper工具類，當設置背景時會根據當前SDK版本是16及以上或以下進行做不同的處理；

處理的源碼如下：

public class ViewHelper {public static void setBackground(View view, Drawable drawable{ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { view.setBackground(drawable); } else { view.setBackgroundDrawable(drawable);} }

2，修復了slider的minimumTrackTintColor 和 maximumTrackTintColor在Android和iOS上顏色顛倒的問題。例如：

<Sliderstyle=minimumTrackTintColor="red"maximumTrackTintColor="blue"/>

顯示效果如下：

3，修復了Android 4.1-4.3 WebView的Bug。

在0.50之前的版本當使用WebView的baseUrl時在Android 4.1-4.3會顯示出html源碼，這是因為在Android 4.1-4.3中WebView不支持text/html的charset=utf-8的MIME type所導致的。

4，修復了View Style的overflow hidden問題。

很久以來overflow樣式在Android默認為hidden而且無法更改。Android的overflow:hidden還有另外一個問題：如果父容器有borderRadius圓角邊框樣式，那么即便開啟了overflow:hidden也仍然無法把子視圖超出圓角邊框的部分裁切掉。

5，修復了Java到C++到JS ViewManagers的交互問題；

6，修復了DeviceIdentity(設備標識)；

ios

修復了React/RCTJavascriptLoader.mm的Content-Type檢查問題，在之前RCTJavascriptLoader對Content-Type的支持是有缺陷的，只能匹配application/javascript或text/javascript兩種類型，現在的做法是Content-Type對以application/javascript或text/javascript開頭的Content-Type都可以支持；

新增功能

0.50版本新增了很多的功能，本文只針對某些重點進行講解，詳細的還請閱讀官方資料。通用的功能有：

通用

• 新增SwipeableFlatList組件，SwipeableFlatList是在FlatList的基礎上添加了側滑顯示菜單的功能，類似于側滑刪除的效果。我們知道SwipeableListView，是React Native 0.27上添加的一個支持側滑顯示菜單的ListView，不過ListView已經不推薦使用了。
• 引入SafeAreaView，SafeAreaView用于包裹其他View，它會自動應用填充布局中不足的一部分，但不包括navigation bars, tab bars, toolbars等視圖。

Android

TimePicker

TimePicker添加了mode (enum('clock', 'spinner', 'default')) 來控制TimePicker的打開模式。

TimePicker是一個老的API了，通過TimePicker組件可以打開Android原生的時間選擇對話框。Android 5以下的設備只支持spinner模式，Android 5及以上設備支持clock, spinner兩種模式：
Android < 5的顯示方式如下：

Android > 5的顯示方式如下：

applicationId

運行在構建的時候指定Android App的applicationId(Android應用的身份ID，應用的唯一標識)；

RAM

Added Android support for loading multiple RAM bundles。

iOS方面

DeviceInfo

DeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI來供開發者判斷當前設備是不是iPhone X，帶有小劉海的iPhone X的屏幕比其他iPhone 手機的屏幕擁有更大高度，所以對于界面布局來說，在iPhone X上需要特別適配。
DeviceInfo是React Native 0.44新增一個類專門提供屏幕尺寸，字體縮放等信息。

Modal組件

Modal組件新增支持onDismiss屬性，這個onDismiss接受一個function，當Modal關閉的時候會回調onDismiss。

<ModalonDismiss={()=>{console.log("Modal is dismiss");}} />

除了上面介紹的更新內容之外，還有很多的東西，這里就不再介紹，大家可以到RN中文網查看相關最新知識。

總結

以上是生活随笔為你收集整理的React Native 0.50版本新功能简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。