譯者：華翔（滬江Web前端工程師）
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）上，也可以直接運行在你自己設備上辽幌。
DOM和Styles
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嫉嘀。可以類比于著名的JavaScript庫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模塊來寫條件判斷。
開發(fā)者工具
當你開啟一個新的項目站削，你幾乎不需要安裝任何東西就有一些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ā)布
如果你開發(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ā)者嘗試一下蝠咆。你會喜歡上它的！
