React Native0.50+開發指導

概要

本文主要對React Native 0.50的關鍵性的更新作個講解和開發適配指導，但願能對從事React Native開發的你有所幫助：

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

特別強調

• <Image>支持更新，不在支持包裹內容；
• 新增對Android Oreo (8.0)支持；
• AlertIOS也是支持能夠不設置titles了；

開發指導

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

<Image style={{width: 200, height: 100}}
       resizeMode="center"
       source={{uri: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2950587800,2884409868&fm=27&gp=0.jpg"}}>
    <Text>小黃人</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.
複製代碼

錯誤。

要改成：

<Image style={{width: 200, height: 100}}
       resizeMode="center"
       source={{uri: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2950587800,2884409868&fm=27&gp=0.jpg"}}/>
 <Text>小黃人</Text>
複製代碼

重大變動

• ReactShadowNode由類被抽象成了接口，代替他的是ReactShadowNodeImpl，這是來自底層的變動，對上層API無影響，你們能夠忽略。(a5d1d25)

• enableBabelRCLookup(啓用BabelRCL查找)，由原來的默認開啓改成了默認關閉，改過以後呢Metro只會關注項目的.babelrc文件。在以前Metro會關注node_modules下的.babelrc文件，這樣將會致使一些問題，由於它沒有Babel的版本，也沒有node_modules/randompackage/.babelrc所需的plugins/presets。這樣話開發者要解決這一問題則須要刪除node_modules/**/.babelrc，那麼如今好了在從0.50版本以後getEnableBabelRCLookup默認返回false，從而避免了這一問題。若是你不想使用這一改變，那麼能夠這樣配置：

  建立一個rn-cli.config.js文件，並添加：

  module.exports = {
    getEnableBabelRCLookup() {
      return true;
    },
  };
  複製代碼

  而後，在node_modules下修改.babelrc :

  {"plugins": ["dummy"]}
  複製代碼

  並確保 JS bundle能正常加載它。

修復的Bugs

Android方面

• 修復了在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);
       }
     }
  複製代碼

} ```

• 修復了slider的minimumTrackTintColor 和 maximumTrackTintColor在Android和iOS上顏色顛倒的問題，這是一個比較有意思的Bug：

  對於以下代碼：

  <Slider
    style={{ width: 300 }}
    minimumTrackTintColor="red"
    maximumTrackTintColor="blue"
  />
  複製代碼

  

• 修復了在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。

• 修復了View Style的overflow hidden問題。

  好久以來overflow樣式在Android默認爲hidden並且沒法更改。Android的overflow:hidden還有另一個問題：若是父容器有borderRadius圓角邊框樣式，那麼即使開啓了overflow:hidden也仍然沒法把子視圖超出圓角邊框的部分裁切掉。

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

• 修復了DeviceIdentity(設備標識)；

iOS方面

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

新特性

通用

• 新增SwipeableFlatList組件，SwipeableFlatList是在FlatList的基礎上添加了側滑顯示菜單的功能，相似於側滑刪除的效果。

  咱們知道SwipeableListView，是React Native 0.27上添加的一個支持側滑顯示菜單的ListView，不過ListView已經不推薦使用了。

• 引入SafeAreaView，SafeAreaView用於包裹其餘View，它會自動應用填充佈局中不足的一部分，但不包括navigation bars, tab bars, toolbars等視圖。

Android方面

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

  TimePicker是一個老的API了，經過TimePicker組件能夠打開Android原生的時間選擇對話框。

  須要提醒你們的是在Android 5如下的設備只支持spinner模式，Android 5及以上設備支持clock, spinner兩種模式：

  • 在Android < 5上只支持spinner:

  

  • 在Android >= 5上:

  spinner：

  

  clock也是默認方式：

  

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

• Added Android support for loading multiple RAM bundles

iOS方面

• DeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI來供開發者判斷當前設備是否是iPhone X，帶有小劉海的iPhone X的屏幕比其餘iPhone 手機的屏幕擁有更大高度，因此對於界面佈局來講，在iPhone X上須要特別適配。

  DeviceInfo是React Native 0.44新增一個類專門提供屏幕尺寸，字體縮放等信息。

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

  開發指導：

  <Modal
          onDismiss={()=>{
            console.log("Modal is dismiss");
          }}
      />
  複製代碼

以上即是我對React Native 0.50的關鍵性更新的講解和開發適配指導，若是你想學習更多關於React Native開發的技巧、經驗能夠學習我主講的React Native開發視頻教程。

若是你們在適配Android和iOS中遇到問題能夠在本文的下方進行留言，我看到了後會及時回覆的哦。 另外也能夠關注個人新浪微博，或者關注個人Github來獲取更多有關React Native開發的技術乾貨。

• 參考：React Native開發視頻教程