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

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

React-Native已經(jīng)誕生有兩年左右了，自從適配了Android平臺(tái)，能構(gòu)建跨平臺(tái)移動(dòng)App開始，這套框架變得更有意思了。一些contributors甚至將其適配到Mac和Windows平臺(tái)，聽起來(lái)非?？?。

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

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

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

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

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

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

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

因?yàn)槟愕拇a不是渲染在HTML頁(yè)面中，這意味著你不能重用之前使用ReactJS渲染的HTML, SVG或Canvas任何庫(kù)。不過(guò)你能找到一些可代替的React-Native庫(kù)。react.parts的Native分類下或許可以找到你想要的東西。

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

盡管Flexbox已經(jīng)誕生有很長(zhǎng)一段時(shí)間了，但是我還是沒有大量的使用它，我不知道你是怎樣的，主要是因?yàn)槲业捻?xiàng)目中需要在一些老舊瀏覽器中有比較好兼容性。對(duì)于React-Native，使用Flexbox構(gòu)建響應(yīng)式App是最好不過(guò)的選擇了。雖然它跟CSS中的表現(xiàn)不太一致，但是你理解之后你會(huì)覺得很方便。我推薦你閱讀這篇文章來(lái)學(xué)習(xí)它：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動(dòng)畫！在React-Native中你需要通過(guò)JavsScript以一種全新的方式讓不同的組件動(dòng)起來(lái)。推薦的方式是使用React-Native提供的Animated API。可以類比于著名的JavaScript庫(kù)Velocity.js。你可以通過(guò)它制作定時(shí)的或者基于手勢(shì)的動(dòng)畫，也能跟不同的Easing（緩動(dòng)）結(jié)合使用。所以你可以做出各種你在web中實(shí)現(xiàn)的效果。React-Native也提供了LayoutAnimation這種十分簡(jiǎn)單友好實(shí)現(xiàn)漸變的API，不過(guò)目前只適配了iOS平臺(tái)，Android平臺(tái)支持的不是很好。

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

使用PanResponder的react-native-swipeout組件

在我看來(lái)，使用PanResponder最大的問(wèn)題是當(dāng)你用PanResponder嵌套views/components的時(shí)候，你需要決定哪一個(gè)是受手勢(shì)控制的。想了解更多關(guān)于動(dòng)畫和PanResponder，React-native Animated API with PanResponder這篇文章將會(huì)非常有用。

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

通過(guò)Navigator在不同頁(yè)面遷移

大多數(shù)的移動(dòng)App不會(huì)像web App那樣有大量的不同方向的頁(yè)面遷移，盡管Navigator組件看起來(lái)會(huì)覺得復(fù)雜，因?yàn)樗峁┝斯芾眄?yè)面遷移所需要的所有東西。我認(rèn)為你應(yīng)該堅(jiān)持使用Navigator組件，除非你開發(fā)了一個(gè)規(guī)模龐大的移動(dòng)App，需要很多的頁(yè)面，或者你害怕在某些時(shí)候會(huì)混亂。你也可以看下NavigatorExperimental這個(gè)組件，但在我看來(lái)，它還不適用于生成環(huán)境。

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

當(dāng)你構(gòu)建了一個(gè)原生App的時(shí)候，了解iOS和Android用戶界面和體驗(yàn)的不同是很重要的，下面這篇文章解釋的很好：Designing for both Android and iOS。

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

你可以為你的app在不同平臺(tái)定義通用的設(shè)計(jì)，只要簡(jiǎn)單直觀，并且不讓不同平臺(tái)的用戶迷惑

你可以為不同的平臺(tái)寫不同的代碼，意味著你有不同的DOM、樣式甚至不同的邏輯和動(dòng)畫，為了遵循不同平臺(tái)的設(shè)計(jì)規(guī)范

如果你選擇第二種方案，React-Native會(huì)檢測(cè)運(yùn)行的平臺(tái)并加載平臺(tái)對(duì)應(yīng)的代碼。推薦你將主要邏輯放到index.js這個(gè)組件中，這樣你可以將展示組件放到多帶帶的文件中。對(duì)于iOS和Android，各自也有index.ios.js和index.android.js這樣多帶帶的入口。

如果你按我的建議組織你的文件結(jié)構(gòu)，大致是這樣的：

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

如果你覺得兩個(gè)不同文件差異很小，也可以通過(guò)Platform模塊來(lái)寫條件判斷。

當(dāng)你開啟一個(gè)新的項(xiàng)目，你幾乎不需要安裝任何東西就有一些React工具可以使用，這在我看起來(lái)很方便。 在你改動(dòng)很少樣式的時(shí)候Hot Reloading非常有用。對(duì)于App中較大的邏輯改動(dòng)，修改代碼的時(shí)候我一般使用Live Reload來(lái)重新加載整個(gè)App。

React-Native 調(diào)試工具

用React-Native最好的是，你在ReactJS中使用的開發(fā)者工具，基本都能使用。Chrome Dev Tools可以清晰的看到網(wǎng)絡(luò)請(qǐng)求（雖然你需要一些小技巧來(lái)查看請(qǐng)求），也可以顯示代碼中的console logs和debugger斷點(diǎn)。你甚至可以直接使用Redux DevTools來(lái)查看Redux數(shù)據(jù)的state。但是跟Web開發(fā)中查看DOM的inspect還沒有，原生的Inspector實(shí)在有些難用。

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

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

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

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

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