摘要：跟非常相似，但是在開始嘗試你第一個之前，也需要了解兩者之間的一些差異。推薦的方式是使用提供的。能用到組件中的或者上以啟用這個組件的觸摸事件。

華翔，Web前端開發(fā)工程師
著作權歸作者所有，轉載請聯(lián)系作者獲得授權。

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

React-Native跟ReactJS非常相似，但是在開始嘗試你第一個native app之前，也需要了解兩者之間的一些差異。作為一個正在學習使用React-Native，并已經用它嘗試構建過幾個原生app的ReactJS web開發(fā)者，我將在本文給大家介紹我發(fā)現(xiàn)的二者之間的一些區(qū)別。

React-Native是一個框架，而ReactJS是用來構建站點的JavaScript庫。當你用ReactJS開始一個新的項目，你或許需要選擇一個類似Webpack的打包器，然后去指定你工程中所需要的打包模塊。React-Native包含了你需要的所有東西，你幾乎不再需要其他東西了。當你開始一個新項目，你會發(fā)現(xiàn)一切都很簡單——你可以只需要在命令行敲一行命令就行了——然后你就可使用ES6, 某些ES7特性，甚至一些比較新的polyfills開始你的編碼。

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

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

大多數(shù)組件都類似HTML，例如View組件跟div標簽就很類似，Text組件類似于p標簽。

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

export default class App extends Component {
  render() {
    return (
      
        Hello world!
      
    );
  }
}

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

為了給React-Native組件加上樣式，你需要在JavaScript中添加樣式表。這種樣式表看起來像CSS，但實際上不太一樣。在剛使用的時候會比較容易混淆，你或許想知道如何像你在SASS中那樣創(chuàng)建mixins，或者你想重寫一些可重用的組件。然而你會發(fā)現(xiàn)React-Native并不是為web元素而生，所以也不能這樣使用styles。幸運的是，你或許能找到一些可代替的方案來滿足你的需要。

盡管Flexbox已經誕生有很長一段時間了，但是我還是沒有大量的使用它，我不知道你是怎樣的，主要是因為我的項目中需要在一些老舊瀏覽器中有比較好兼容性。對于React-Native，使用Flexbox構建響應式App是最好不過的選擇了。雖然它跟CSS中的表現(xiàn)不太一致，但是你理解之后你會覺得很方便。我推薦你閱讀這篇文章來學習它：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?？梢灶惐扔谥腏avaScript庫Velocity.js。你可以通過它制作定時的或者基于手勢的動畫，也能跟不同的Easing（緩動）結合使用。所以你可以做出各種你在web中實現(xiàn)的效果。React-Native也提供了LayoutAnimation這種十分簡單友好實現(xiàn)漸變的API，不過目前只適配了iOS平臺，Android平臺支持的不是很好。

為了跟用戶手勢很好的交互，React-Native提供了類似JavaScript的touch事件 web API，叫做PanResponder。安裝和使用后或許會感到有些麻煩，但是你最終會發(fā)現(xiàn)其實它并不復雜。PanResponder能用到組件中的View (或者Text、Image)上以啟用這個View組件的觸摸事件。PanResponder提供了一系列function來捕捉用戶的觸摸事件，例如onPanResponderGrant (touchstart), onPanResponderMove(touchmove) 或onPanResponderRelease (touchend)。通過這些function可以得到原生事件和手勢狀態(tài)信息，如所有的touch、位置以及滑動距離，速度和觸摸中心等。

使用PanResponder的react-native-swipeout組件

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

當我構建第一個React-Native App的時候，我很想知道怎樣在兩個界面之間導航。我最開始做的是去搜索react-router的代替品，大多數(shù)React App使用這個著名的庫來實現(xiàn)頁面遷移。我發(fā)現(xiàn)一些類似功能的庫，但我發(fā)現(xiàn)總有一些東西我不太喜歡：有的使用起來十分復雜，有的我對它的動畫不太滿意，有的并不是我想要的自定義的方式，或者在iOS和Android平臺表現(xiàn)不一致或不兼容。然后我很好奇導航到底是怎么實現(xiàn)的，我發(fā)現(xiàn)了React-Native提供的Navigator組件。我其實應該從這里開始的，找react-router的代替品并不是最好的選擇。

通過Navigator在不同頁面遷移

大多數(shù)的移動App不會像web App那樣有大量的不同方向的頁面遷移，盡管Navigator組件看起來會覺得復雜，因為他提供了管理頁面遷移所需要的所有東西。我認為你應該堅持使用Navigator組件，除非你開發(fā)了一個規(guī)模龐大的移動App，需要很多的頁面，或者你害怕在某些時候會混亂。你也可以看下NavigatorExperimental這個組件，但在我看來，它還不適用于生成環(huán)境。

設計一套代碼適配多平臺的App有時候很方便，但是不久你的代碼就會看起來很混亂。我可以肯定在現(xiàn)代瀏覽器里面寫代碼，并且想讓其看起來在老舊瀏覽器里面“很美好”的時候也會有這種感受，得在CSS和JavaScript中到處加一系列的判斷條件。

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

假定你可以控制App的界面和表現(xiàn)，你有兩種選擇：

你可以為你的app在不同平臺定義通用的設計，只要簡單直觀，并且不讓不同平臺的用戶迷惑

你可以為不同的平臺寫不同的代碼，意味著你有不同的DOM、樣式甚至不同的邏輯和動畫，為了遵循不同平臺的設計規(guī)范

如果你選擇第二種方案，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中使用的開發(fā)者工具，基本都能使用。Chrome Dev Tools可以清晰的看到網絡請求（雖然你需要一些小技巧來查看請求），也可以顯示代碼中的console logs和debugger斷點。你甚至可以直接使用Redux DevTools來查看Redux數(shù)據(jù)的state。但是跟Web開發(fā)中查看DOM的inspect還沒有，原生的Inspector實在有些難用。

如果你開發(fā)一個適配了iOS和Android平臺的App，并將其發(fā)布到App Store或者Google Play之前，你需要知道Xcode和Android Studio是怎么工作的，這樣才能保證沒有什么紕漏。對于iOS，跟發(fā)布一個普通的原生App沒什么區(qū)別，不過在Android上，在發(fā)布到Google Play之前你需要按照React說明注冊你的APK。

如果你很懷念以前在web app和VCS中那樣簡單的敲一行命令就能對你的原生App部署更新，你可以嘗試下用Code Push將你的代碼部署到用戶端，這樣就不需要先申請，然后發(fā)布App到Store，再等待很久才能通過。Code Push在你需要做一些優(yōu)化或者bug修復的時候非常有用，但是不建議用來更新整個的feature。

React-Native用起來十分順手，我差不多已經使用了快一年，開發(fā)起App也十分迅速。你可以在iOS和Android上像ReactJS那樣快速的實現(xiàn)復雜的UI。我覺得從ReactJS到React-Native的學習曲線很平滑，假如你喜歡學習JavaScript框架，那就更簡單了，這只是換一種方式使用React。

React-Native的社區(qū)很龐大，并且還在增長，這種技術也不會很快的消失，我推薦每一個不想依賴Cordova創(chuàng)建移動App的web開發(fā)者嘗試一下。你會喜歡上它的！

iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當當開售。
>> 滬江Web前端上海團隊招聘【Web前端架構師】，有意者簡歷至：zhouyao@hujiang.com <<