React Native0.50+開發(fā)指導(dǎo)

期待已久的新課上線啦！解鎖React Native開發(fā)新姿勢，一網(wǎng)打盡React Native最新與最熱技術(shù)，點我Get!!!

概要

本文主要對React Native 0.50的關(guān)鍵性的更新做個講解和開發(fā)適配指導(dǎo)，希望能對從事React Native開發(fā)的你有所幫助：

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

特別強調(diào)

  • <Image>支持更新，不在支持包裹內(nèi)容；
  • 新增對Android Oreo (8.0)支持；
  • AlertIOS也是支持可以不設(shè)置titles了；

開發(fā)指導(dǎo)

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

<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查找)，由原來的默認(rèn)開啟改為了默認(rèn)關(guān)閉，改過之后呢Metro只會關(guān)注項目的.babelrc文件。在之前Metro會關(guān)注node_modules下的.babelrc文件，這樣將會導(dǎo)致一些問題，因為它沒有Babel的版本，也沒有node_modules/randompackage/.babelrc所需的plugins/presets。這樣話開發(fā)者要解決這一問題則需要刪除node_modules/**/.babelrc，那么現(xiàn)在好了在從0.50版本之后getEnableBabelRCLookup默認(rèn)返回false，從而避免了這一問題。如果你不想使用這一改變，那么可以這樣配置：

    創(chuàng)建一個rn-cli.config.js文件，并添加：

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

    然后，在node_modules下修改.babelrc :

    {"plugins": ["dummy"]}

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

修復(fù)的Bugs

Android方面

  • 修復(fù)了在Android SDK 15及以下版本設(shè)置背景的Bug。在Android中設(shè)置View的背景在SDK15及以下和以上和的API是不一樣的，在之前的RN版本中沒有做差異判斷，所以會導(dǎo)致在低版本設(shè)置背景的Bug，在0.50及以上版本底層實現(xiàn)上添加了ViewHelper工具類，當(dāng)設(shè)置背景時會根據(jù)當(dāng)前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);
     }
   }

}
```

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

    對于如下代碼：

    <Slider
  style={{ width: 300 }}
  minimumTrackTintColor="red"
  maximumTrackTintColor="blue"
/>
    slider.png

  • 修復(fù)了在Android 4.1-4.3 WebView的Bug。

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

  • 修復(fù)了View Style的overflow hidden問題。

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

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

  • 修復(fù)了DeviceIdentity(設(shè)備標(biāo)識)；

iOS方面

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

新特性

通用

  • 新增SwipeableFlatList組件，SwipeableFlatList是在FlatList的基礎(chǔ)上添加了側(cè)滑顯示菜單的功能，類似于側(cè)滑刪除的效果。

    我們知道SwipeableListView，是React Native 0.27上添加的一個支持側(cè)滑顯示菜單的ListView，不過ListView已經(jīng)不推薦使用了。

  • 引入SafeAreaView，SafeAreaView用于包裹其他View，它會自動應(yīng)用填充布局中不足的一部分，但不包括navigation bars, tab bars, toolbars等視圖。

Android方面

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

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

    需要提醒大家的是在Android 5以下的設(shè)備只支持spinner模式，Android 5及以上設(shè)備支持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也是默認(rèn)方式：

    screen shot 2017-02-14 at 16 51 02

  • 運行在構(gòu)建的時候指定Android App的applicationId(Android應(yīng)用的身份ID，應(yīng)用的唯一標(biāo)識)；

  • Added Android support for loading multiple RAM bundles

iOS方面

  • DeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI來供開發(fā)者判斷當(dāng)前設(shè)備是不是iPhone X，帶有小劉海的iPhone X的屏幕比其他iPhone 手機的屏幕擁有更大高度，所以對于界面布局來說，在iPhone X上需要特別適配。

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

  • Modal組件新增支持onDismiss屬性，這個onDismiss接受一個function，當(dāng)Modal關(guān)閉的時候會回調(diào)onDismiss。

    開發(fā)指導(dǎo)：

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

以上便是我對React Native 0.50的關(guān)鍵性更新的講解和開發(fā)適配指導(dǎo)，如果你想學(xué)習(xí)更多關(guān)于React Native開發(fā)的技巧、經(jīng)驗可以學(xué)習(xí)我主講的React Native開發(fā)視頻教程。

如果大家在適配Android和iOS中遇到問題可以在本文的下方進行留言，我看到了后會及時回復(fù)的哦。
另外也可以關(guān)注我的新浪微博，或者關(guān)注我的Github來獲取更多有關(guān)React Native開發(fā)的技術(shù)干貨。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容