翻譯 | 從 ReactJS 到 React-Native—二者的主要差別是什麼？

華翔，Web前端開發工程師
著做權歸做者全部，轉載請聯繫做者得到受權。

React-Native已經誕生有兩年左右了，自從適配了Android平臺，能構建跨平臺移動App開始，這套框架變得更有意思了。一些contributors甚至將其適配到Mac和Windows平臺，聽起來很是酷。

React-Native跟ReactJS很是類似，可是在開始嘗試你第一個native app以前，也須要了解二者之間的一些差別。做爲一個正在學習使用React-Native，並已經用它嘗試構建過幾個原生app的ReactJS web開發者，我將在本文給你們介紹我發現的兩者之間的一些區別。

安裝和打包

React-Native是一個框架，而ReactJS是用來構建站點的JavaScript庫。當你用ReactJS開始一個新的項目，你或許須要選擇一個相似Webpack的打包器，而後去指定你工程中所須要的打包模塊。React-Native包含了你須要的全部東西，你幾乎再也不須要其餘東西了。當你開始一個新項目，你會發現一切都很簡單——你能夠只須要在命令行敲一行命令就好了——而後你就可以使用ES6, 某些ES7特性，甚至一些比較新的polyfills開始你的編碼。

你須要安裝Xcode (在iOS和Mac平臺)或Android Studio（在Android平臺）來運行你的app。你也能夠選擇將你的app運行在你想使用的平臺的模擬器（simulator/emulator）上，也能夠直接運行在你本身設備上。

DOM和Styles

React-Native不使用HTML來渲染App，可是提供了可代替它的相似組件。這些React-Native組件映射到渲染到App中的真正的原生iOS和Android UI組件。

大多數組件都相似HTML，例如View組件跟div標籤就很相似，Text組件相似於p標籤。

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>Hello world!</Text>
      </View>
    );
  }
}

由於你的代碼不是渲染在HTML頁面中，這意味着你不能重用以前使用ReactJS渲染的HTML, SVG或Canvas任何庫。不過你能找到一些可代替的React-Native庫。react.parts的Native分類下或許能夠找到你想要的東西。

爲了給React-Native組件加上樣式，你須要在JavaScript中添加樣式表。這種樣式表看起來像CSS，但實際上不太同樣。在剛使用的時候會比較容易混淆，你或許想知道如何像你在SASS中那樣建立mixins，或者你想重寫一些可重用的組件。然而你會發現React-Native並非爲web元素而生，因此也不能這樣使用styles。幸運的是，你或許能找到一些可代替的方案來知足你的須要。

儘管Flexbox已經誕生有很長一段時間了，可是我仍是沒有大量的使用它，我不知道你是怎樣的，主要是由於個人項目中須要在一些老舊瀏覽器中有比較好兼容性。對於React-Native，使用Flexbox構建響應式App是最好不過的選擇了。雖然它跟CSS中的表現不太一致，可是你理解以後你會以爲很方便。我推薦你閱讀這篇文章來學習它：Understanding React Native flexbox layout。

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        backgroundColor: '#fff',
        padding: 30,
    },
    button: {
        alignSelf: 'center',
        marginTop: 20,
        width: 100,
    },
});

動畫和手勢

再見吧CSS動畫！在React-Native中你須要經過JavsScript以一種全新的方式讓不一樣的組件動起來。推薦的方式是使用React-Native提供的Animated API。能夠類比於著名的JavaScript庫Velocity.js。你能夠經過它製做定時的或者基於手勢的動畫，也能跟不一樣的Easing（緩動）結合使用。因此你能夠作出各類你在web中實現的效果。React-Native也提供了LayoutAnimation這種十分簡單友好實現漸變的API，不過目前只適配了iOS平臺，Android平臺支持的不是很好。

爲了跟用戶手勢很好的交互，React-Native提供了相似JavaScript的touch事件 web API，叫作PanResponder。安裝和使用後或許會感到有些麻煩，可是你最終會發現其實它並不複雜。PanResponder能用到組件中的View (或者Text、Image)上以啓用這個View組件的觸摸事件。PanResponder提供了一系列function來捕捉用戶的觸摸事件，例如onPanResponderGrant (touchstart), onPanResponderMove(touchmove) 或onPanResponderRelease (touchend)。經過這些function能夠獲得原生事件和手勢狀態信息，如全部的touch、位置以及滑動距離，速度和觸摸中心等。

使用PanResponder的react-native-swipeout組件

在我看來，使用PanResponder最大的問題是當你用PanResponder嵌套views/components的時候，你須要決定哪個是受手勢控制的。想了解更多關於動畫和PanResponder，React-native Animated API with PanResponder這篇文章將會很是有用。

導航

當我構建第一個React-Native App的時候，我很想知道怎樣在兩個界面之間導航。我最開始作的是去搜索react-router的代替品，大多數React App使用這個著名的庫來實現頁面遷移。我發現一些相似功能的庫，但我發現總有一些東西我不太喜歡：有的使用起來十分複雜，有的我對它的動畫不太滿意，有的並非我想要的自定義的方式，或者在iOS和Android平臺表現不一致或不兼容。而後我很好奇導航究竟是怎麼實現的，我發現了React-Native提供的Navigator組件。我其實應該從這裏開始的，找react-router的代替品並非最好的選擇。

經過Navigator在不一樣頁面遷移

大多數的移動App不會像web App那樣有大量的不一樣方向的頁面遷移，儘管Navigator組件看起來會以爲複雜，由於他提供了管理頁面遷移所須要的全部東西。我認爲你應該堅持使用Navigator組件，除非你開發了一個規模龐大的移動App，須要不少的頁面，或者你懼怕在某些時候會混亂。你也能夠看下NavigatorExperimental這個組件，但在我看來，它還不適用於生成環境。

平臺特殊代碼

設計一套代碼適配多平臺的App有時候很方便，可是不久你的代碼就會看起來很混亂。我能夠確定在現代瀏覽器裏面寫代碼，而且想讓其看起來在老舊瀏覽器裏面「很美好」的時候也會有這種感覺，得在CSS和JavaScript中處處加一系列的判斷條件。

當你構建了一個原生App的時候，瞭解iOS和Android用戶界面和體驗的不一樣是很重要的，下面這篇文章解釋的很好：Designing for both Android and iOS。

假定你能夠控制App的界面和表現，你有兩種選擇：

• 你能夠爲你的app在不一樣平臺定義通用的設計，只要簡單直觀，而且不讓不一樣平臺的用戶迷惑
• 你能夠爲不一樣的平臺寫不一樣的代碼，意味着你有不一樣的DOM、樣式甚至不一樣的邏輯和動畫，爲了遵循不一樣平臺的設計規範

若是你選擇第二種方案，React-Native會檢測運行的平臺並加載平臺對應的代碼。推薦你將主要邏輯放到index.js這個組件中，這樣你能夠將展現組件放到單獨的文件中。對於iOS和Android，各自也有index.ios.js和index.android.js這樣單獨的入口。

若是你按個人建議組織你的文件結構，大體是這樣的：

/src
  /components 
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js      
        /Content
          /index.android.js
          /index.ios.js
      /index.js

若是你以爲兩個不一樣文件差別很小，也能夠經過Platform模塊來寫條件判斷。

開發者工具

當你開啓一個新的項目，你幾乎不須要安裝任何東西就有一些React工具可使用，這在我看起來很方便。 在你改動不多樣式的時候Hot Reloading很是有用。對於App中較大的邏輯改動，修改代碼的時候我通常使用Live Reload來從新加載整個App。

React-Native 調試工具

用React-Native最好的是，你在ReactJS中使用的開發者工具，基本都能使用。Chrome Dev Tools能夠清晰的看到網絡請求（雖然你須要一些小技巧來查看請求），也能夠顯示代碼中的console logs和debugger斷點。你甚至能夠直接使用Redux DevTools來查看Redux數據的state。可是跟Web開發中查看DOM的inspect尚未，原生的Inspector實在有些難用。

發佈

若是你開發一個適配了iOS和Android平臺的App，並將其發佈到App Store或者Google Play以前，你須要知道Xcode和Android Studio是怎麼工做的，這樣才能保證沒有什麼紕漏。對於iOS，跟發佈一個普通的原生App沒什麼區別，不過在Android上，在發佈到Google Play以前你須要按照React說明註冊你的APK。

若是你很懷念之前在web app和VCS中那樣簡單的敲一行命令就能對你的原生App部署更新，你能夠嘗試下用Code Push將你的代碼部署到用戶端，這樣就不須要先申請，而後發佈App到Store，再等待好久才能經過。Code Push在你須要作一些優化或者bug修復的時候很是有用，可是不建議用來更新整個的feature。

結束語

React-Native用起來十分順手，我差很少已經使用了快一年，開發起App也十分迅速。你能夠在iOS和Android上像ReactJS那樣快速的實現複雜的UI。我以爲從ReactJS到React-Native的學習曲線很平滑，假如你喜歡學習JavaScript框架，那就更簡單了，這只是換一種方式使用React。

React-Native的社區很龐大，而且還在增加，這種技術也不會很快的消失，我推薦每個不想依賴Cordova建立移動App的web開發者嘗試一下。你會喜歡上它的！

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

>> 滬江Web前端上海團隊招聘【Web前端架構師】，有意者簡歷至：zhouyao@hujiang.com <<