React Native在2017年經歷了衆多版本的迭代，從接觸的0.29版本開始，到前不久發佈的0.52版本，React Native做爲目前最受歡迎的移動跨平臺方案。雖然，目前存在着不少的功能和性能的缺失，可是不能否認的是React Native確實在進步。javascript
本文主要從如下幾個方面來對React Native0.50+進行講解：html
- 在兼容性方面新增了對Android8.0、iPhone X的支持；
- 在API方面爲TimePicker添加了打開方式的API，另外容許在構建Android項目的時候指定applicationId;
- 在組件方面，新添加了支持側滑顯示菜單的SwipeableFlatList，以及SafeAreaView。
- 修復了一些關鍵性的Bug；
Image組件
React Native 0.50版本中 Image組件迎來了比較大的一個特性的改變，即在React Native 0.50及以上版本中Image不在支持包裹內容。例如：java
<Image style= resizeMode="center" source=> <Text>《React Native移動開發實戰》</Text> </Image>
以上代碼在0.50以前是能夠正常運行的，在0.50上運行會報：node
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組件，能夠按照下面的用法：react
<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，從而避免了這一問題。若是你不想使用這一改變，那麼能夠這樣配置：ios
建立一個rn-cli.config.js文件，並添加：babel
module.exports = { getEnableBabelRCLookup() { return true; }, };
而後，在node_modules下修改.babelrc :app
{"plugins": ["dummy"]}
修復的系統bug
在0.50版本中，修復的系統bug有：dom
Android
1，修復了在Android SDK 15及如下版本設置背景的Bug。在Android中設置View的背景在SDK15及如下和以上和的API是不同的，在以前的RN版本中沒有作差別判斷，因此會致使在低版本設置背景的Bug，在0.50及以上版本底層實現上添加了ViewHelper工具類，當設置背景時會根據當前SDK版本是16及以上或如下進行作不一樣的處理；ide
處理的源碼以下：
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上顏色顛倒的問題。例如：
<Slider style= 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。
<Modal onDismiss={()=>{ console.log("Modal is dismiss"); } } />
除了上面介紹的更新內容以外，還有不少的東西，這裏就再也不介紹，你們能夠到RN中文網查看相關最新知識。