用React Native編寫跨平臺APP

React Native 是一個編寫iOS與Android平臺實時、原生組件渲染的應用程序的框架。它基於React，Facebook的JavaScript的庫，為的是構建用戶接口，而並不是以瀏覽器為目標，它是以手機平臺為目的。

換句話說，假設你是一個web開發人員，你能夠使用React Native去編寫幹凈、高速的移動APP，而且能夠體會到熟悉的框架和單個的JavaScript的代碼庫。

在這之前，我們已經聽到用諸如Cordova或者是Titanium這些框架的APP開發的承諾，那麽使用React Native去開發APP到底怎樣呢？在這篇文章中，我們將會探索React Native是什麽，以及它到底是怎樣工作的。

然後。我們將會報道使用React Native去編寫iOS以及Android的應用程序到底是怎樣的。結尾，你講會看到為什麽說React Native是你的接下來的一個移動項目開發極其推薦的一個選擇。

什麽是React Native?

在我們準備重點介紹開發人員的經驗之前，我們先來說明一下React Native是什麽。以及稍微設計一下React Native是怎樣工作的。

它不過React

React Native是一個為了編寫用戶交互接口的JavaScript的庫。一般是用於web上。由Facebook開發。並於2013年開源。React已經見證了廣泛的使用。React在領域內的使用相對來說是狹窄的，它只關註它自己。通過渲染你的應用程序的用戶交互的接口。與一般的大型的MVC風格的庫呈分庭抗禮的局面。

開發人員由於一系列的原因，對於React已經是趨之若鶩了。它是輕量級的，同一時候它提供了令人為之眼前一亮的行為。尤其是對於高速改變的數據。同一時候由於其自身的組件的結構，它鼓舞你去寫更加具有模塊化的，可復用的代碼。

要不是移動端。React Native果真不過React。

這裏是有一些區別：你應當使用一個View組件而不是一個Div組件，應當使用一個Image標簽。而不是img標簽，開發人員的絕大多數都是保持幾乎相同同樣的，當然了，假設具備一定的Objective-c或者是Java的語言知識。那就更好了。對於移動開發人員，會有諸如這些機警的考慮（我是否做了多機型的適配工作？我的觸摸點是否已經設置了足夠大？）然而，React Native將會感覺全然熟悉。而且是舒適的，當然這是就那些已經學會怎樣在瀏覽器中用React做開發的開發人員而言。

它確實是React

首當其沖。讓人對React Native產生驚艷的感覺的是React Native的的確確是Native的。其余的針對移動端的JavaScript引擎是打包你的JavaScript代碼進入到一個優化過的WebView其中，或許這些WebView也實現了某些本地化的UI的行為的接口。比方說動畫。可是歸根到底。你依然寫的是一個web app。

在React中，一個組件描寫敘述了自己的特性；React為你處理渲染。

一個幹凈的抽象層將這兩個函數隔絕開來。對於web端。為了渲染組件。React使用了標準的Html的標簽。這個同樣的抽象層，一般被理解為“Bridge”，能夠使得React Native去觸發iOS與Android上面的渲染的API，那就意味著，在iOS，你的React Native組件繪制真正的UI View。然而在Android上，它們將會繪制native View。

你將會寫一些看上去比較糟糕，與標準的JavaScript、CSS、Html比較相像的代碼。

並不是直接是向下編譯成本地代碼。React Native 拿到你的應用程序。使用宿主平臺的JavaScript引擎執行它。同一時候不堵塞主UI主線程。這樣，你將會得到原生的app的操作、動畫、體驗的效果，而不須要必須寫成Objective-C或者Java形式的代碼。其它的跨平臺的app的開發的模式，比方說。Cordova或者是Titanium。絕對達不到與原生體驗或者表現這樣的高度一致的效果。

一個比較好的開發人員的體驗

與標準的Android或者是iOS的開發相比，React Native提供了一種更加具有震撼效果的開發人員的體驗，由於你的應用程序差點兒全部是基於JavaScript開發的，你將會獲取到一系列的Web開發上面的優勢，比方能夠瞬間刷新你的應用程序去看到你的代碼的改變。

與花費長時間等待構建一個傳統的移動app相比。React Native感覺簡直就是上天的饋贈。

處理多個平臺

令人充滿感激的是。React Native支持多個平臺. React Native的絕大多數的API都是跨平臺的, 所以你只須要編寫一個React Native組件, 它將會無縫的工作於iOS與Android平臺上。

Facebook宣傳它們的Ad Manager 應用程序 87%代碼在兩個平臺重用, 然而我寫了一個flashcard 應用程序更是沒有一點平臺相關的代碼。假設你確實希望用到一些平臺相關的代碼–由於iOS與Android的兩個平臺的不同的交互。比方。或者是你希望反復利用一個平臺的API的優勢–那也是很easy的，React Native支持你去指定特定的平臺的版本號，對於每個組件而言，然後，你能夠將他們集成到你的React Native版本號的應用程序中。

用React Native來進行開發

使用一個簡單的JavaScript的代碼庫來進行寫真正的iOS或者是Android的native 應用看上去是一件沒有頭腦的事情。

那麽用React Native來進行工作到底是怎樣的呢？

開始

去開始開發React Native的應用程序。除了React Native以外。還須要安裝一些針對iOS以及Android平臺的一般性的依賴的組件。

詳細的可查詢React Native的站點。

建立React Native是簡單的，假設你已經安裝了一個最新版的node了。那麽就能夠使用npm install -g react-native-cli來安裝React Native。

一旦你的這些依賴的組件已經安裝，執行React Native 初始化項目的名稱，將會自己主動生成一個React Native項目的模板。

一般性的React組件

一旦你的開發環境就緒, 是時候去寫一些真正的應用程序。

正如之前提到的。React Native真的不過React，可是有幾點不同。React Native組件對於瀏覽器而言，看上去更像是React組件。可是你的基本構建的塊已經發生了變化，比方說相似Div、Img或者是p這樣的標簽。

React Native為你提供了主要的組件，比方Text或者是View，在以下的樣例中，就用到了主要的組件ScrollView、TouchableHighliht與Text組件，全部的這些，將會映射到Android與iOS指定的View上面去。

利用它們創建一個滾動的View，伴隨著合適的Touch處理是很直截了當的：

var React = require(‘react-native‘);
var { ScrollView, TouchableHighlight, Text } = React;
var TouchDemo = React.createClass({
render: function() {
return (
<ScrollView>
<TouchableHighlight onPress={() => console.log(‘pressed‘)}>
<Text>Proper Touch Handling</Text>
</TouchableHighlight>
</ScrollView>
);
},
});

假設你還沒有處理好html與javascript的語法混亂的時候，看上去有些混亂，React強烈建議你使用JSX，對於React Native，你也是別無選擇。你的渲染的裝飾。是與javascript共同搭配來控制它的行為。這常常會遭到入門者的強烈的反對。

可是我強烈建議你給它一次機會。

由於React Native組件同React組件是很的相似，使得React轉換為React Native也是很的簡便。

樣式表

為了使得繪制更加簡單與有效, 同一時候鼓舞便於管理的樣式風格, React Native 實現了嚴格的CSS的子集。

那就意味著你沒有必要學習指定的平臺的方式去設計你的View，可是這須要你花費一點時間去學習怎樣使用React Native的樣式。

最大的不同是你沒有必要操心指定的規則。由於樣式的繼承是相當的精簡的。而且React Native使用的內聯的樣式的語法。

以下是一個樣式表在React Native是怎樣被創建的樣例：

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30
  }
});

使用內聯語法。這個樣式是這樣被使用的：
<View style={styles.container}>
...
</View>

開始移動端的開發

React Native一個更加復雜的地方是開發環境的搭建。 當使用React Native來進行開發的時候。你須要具備全部移動端開發的必備的工具，以及JavaScript的編輯的工具：一個文本編輯器，以及Chrome的調試的工具。

對於iOS，這意味著Xcode的打開，同一時候包括iOS的模擬器。對於Android，並不是是Android Studio。你將會使用命令行工具。終於，你將同一時候也須要React Native的包執行。你能夠選擇你的最喜歡的文本編輯器去使用去編輯你的JavaScript的代碼。

這樣的結果就是你須要有大量的工具在身邊。有時候的確是感覺有太多的工具。桌面顯的雜亂不堪，太多的桌面窗口打開的確是很煩人。還有一方面，至少React Native並沒有替你隱藏標準的APP開發的進程。

轉向本地代碼

React Native通過提供JavaScript接口給已經存在的平臺的API，這意味著你能夠向一般的React代碼那樣進行書寫。而且React Native “Bridge”將會負責繁重的轉換工作，可是假設橋接不完好的時候回發生什麽呢？

不可避免。用一個新的框架，比方React Native。將會有一些API會不被支持調用，在這樣的情況下，能夠書寫本地代碼，在宿主平臺與JavaScript代碼之間進行銜接溝通。

比方：

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule

RCT_EXPORT_MODULE();

// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
}
@end

然後。從JavaScript模塊中去使用你的native 模塊。包括它就像使用另外的一個Library一樣：

var React = require(‘react-native‘);
var { NativeModules, Text } = React;

var Message = React.createClass({
  getInitialState() {
    return { text: ‘Goodbye World.‘ };
  },
  componentDidMount() {
    NativeModules.MyCustomModule.processString(this.state.text, (text) => {
      this.setState({text});
    });
  },
  render: function() {
    return (
      <Text>{this.state.text}</Text>
    );
  }
});

你或許使用這個，當一個你須要的API不被支持，假設你希望將已經存在的oc代碼或者是Java代碼與React Native集成在一起，或者是你希望寫一些高操作的函數去處理一些密集的圖形處理。值得高興的是，React Native給一個很彈性的編寫代碼的方式，當你須要的時候，使用native module，而且這樣的方式是直截了當的。

即使你之前從未與oc或者是Java打過交道，書寫橋接代碼是一個很好的練習，在native移動app的開發過程中獲取愉快的感受。

用React Native編寫跨平臺APP