React Native0.50+開發指導

KoreySkutho 6年前發布 | 21K 次閱讀移動開發 ReactNative React Native

概要

本文主要對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"
/>
```
slider.png
修復了在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 :
screen shot 2017-02-14 at 17 05 44
- 在Android >= 5上:
spinner ：

screen shot 2017-02-14 at 16 51 17

clock 也是默認方式：

screen shot 2017-02-14 at 16 51 02
</li>
運行在構建的時候指定Android App的applicationId(Android應用的身份ID，應用的唯一標識)；
Added Android support for loading multiple RAM bundles

iOS方面

DeviceInfo 新增 DeviceInfo.isIPhoneX_deprecated API來供開發者判斷當前設備是不是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開發視頻教程

來自：http://www.jianshu.com/p/75897271d255

本文由用戶 KoreySkutho 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1513325773421.html

移動開發 ReactNative React Native

React Native0.50+開發指導

概要

特別強調

開發指導

重大變更

修復的Bugs

Android方面

iOS方面

新特性

通用

Android方面

iOS方面

相關經驗

相關資訊

相關文檔

目錄