React Native 中文版
Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大會上推出了基於 JavaScript 的開源框架 [React Native](http://facebook.github.io/react-native/)，本中文教程翻譯自 [React Native 官方文檔](http://facebook.github.io/react-native/docs/getting-started.html)。
React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。
React Native 使你能夠使用基於 JavaScript 和 [React](http://wiki.jikexueyuan.com/project/react/) 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在所有開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易爲任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，並將繼續爲 React Native 投資。
[React Native 入門](http://wiki.jikexueyuan.com/project/react-native/getting-started.html)
原生的 iOS 組件
有了 ReactNative，你可使用標準平臺組件，比如 iOS 平臺上的 UITabBar 和 UINavigationController。這可以讓你的應用程序擁有和原生平臺一致的外觀和體驗，並保持較高的品質。使用相應的 React 組件，如 iOS 標籤欄和 iOS 導航器，這些組件可以輕鬆併入你的應用程序中。
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);
},
});
異步執行
JavaScript 應用代碼和原生平臺之間所有的操作都是異步執行，並且原生模塊也可以使用額外線程。這意味着我們可以解碼主線程圖像，並將其在後臺保存至磁盤，在不阻塞 UI 的情況下進行文本和佈局的估量計算，等等。因此，React Native 應用程序的流暢度和響應性都非常好。通信也是完全可序列化的，當運行完整的應用程序時，這允許我們使用 Chrome Developer Tools 來調試 JavaScript，或者在模擬器中，或者在真機上。
見 [調試](http://wiki.jikexueyuan.com/project/react-native/debugging.html)
觸摸處理
iOS 有一個非常強大的系統稱爲 Responder Chain，可以用來響應複雜視圖層級中的事件，但是在 Web 中並沒有類似功能的工具。React Native 可實現類似的響應系統並提供高水平的組件，比如 TouchableHighlight，無需額外配置即可與滾動視圖和其他元素適度整合。
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>
);
},
});
彈性框和樣式
佈局視圖應該是簡單的，所以我們將 Web 平臺上的彈性框模塊引入了 React Native。彈性框可用來搭建最常用的 UI 佈局，比如代用邊緣和填充的堆疊和嵌入。React Native 還支持常見的 Web 樣式，比如 fontWeight 和 StyleSheet 抽象，它們提供了一種優化機制來宣稱你所有的樣式和佈局在組件中的應用是正確的，且組件把它們應用到了內網中。
var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;
var ReactNative = React.createClass({
render: function() {
return (
<View style={styles.row}>
<Image
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
style={styles.p_w_picpath}
/>
<View style={styles.text}>
<Text style={styles.title}>
React Native
</Text>
<Text style={styles.subtitle}>
Build high quality mobile apps using React
</Text>
</View>
</View>
);
},
});
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
p_w_picpath: { width: 40, height: 40, marginRight: 10 },
text: { flex: 1, justifyContent: 'center'},
title: { fontSize: 11, fontWeight: 'bold' },
subtitle: { fontSize: 10 },
});
Polyfills
React Native 的重點是改變視圖代碼編寫的方式。接下來，我們注意網絡中普遍的並把那些 API 放在適當的地方。可以使用 npm 安裝 JavaScript 庫，這些庫用於融入到 React Native 中的頂級功能，比如 XMLHttpRequest，window.requestAnimationFrame 及 navigator.geolocation。我們正在擴大可用的 API，並致力於爲開源社區做出貢獻。
var React = require('react-native');
var { Text } = React;
var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
render: function() {
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});
可擴展性
使用 React Native 無需編寫一行原生代碼即可創建出一款不錯的應用程序，並且 React Native 可通過自定義原生視圖和模塊來進行擴展--也就是說你可以重用你已經構建的任何內容，並且可導入和使用你最喜歡的原生庫。爲了在 iOS 中創建一個簡單的模塊，需要創建一個新的類來實現 RCTBridgeModule 協議，並將你想要在 RCT_EXPORT_METHOD 中對 JavaScript 可用的功能包裝起來。另外，類本身必須可以用 RCT_EXPORT_MODULE() 顯式導出；
// Objective-C
#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
var React = require('react-native');
var { NativeModules, Text } = React;
var Message = React.createClass({
render: function() {
getInitialState() {
return { text: 'Goodbye World.' };
},
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
return (
<Text>{this.state.text}</Text>
);
},
});
自定義的 iOS 視圖可以通過子類化 RCTViewManager，實現 -(UIView *)view 方法並用 RCT_EXPORT_VIEW_PROPERTY 宏導出屬性的辦法來公開。然後一個簡單的 JavaScript 文件會連接這些點。
// Objective-C
#import "RCTViewManager.h"
@interface MyCustomViewManager : RCTViewManager
@end
@implementation MyCustomViewManager
- (UIView *)view
{
return [[MyCustomView alloc] init];
}
RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);
@end
// JavaScript
module.exports = createReactIOSNativeComponentClass({
validAttributes: { myCustomProperty: true },
uiViewClassName: 'MyCustomView',
});
[React Native 入門](http://wiki.jikexueyuan.com/project/react-native/getting-started.html)
> 原文出處：http://wiki.jikexueyuan.com/project/react-native/