Facebook React Native 中文教程一：介紹

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 { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({

      <ScrollView>

        <TouchableHighlight onPress={() => console.log('pressed')}>

          <Text>Proper Touch Handling</Text>

        </TouchableHighlight>

      </ScrollView>

彈性框和樣式

布局視圖應該是簡單的，是以我們将 Web 平台上的彈性框子產品引入了 React Native。彈性框可用來搭建最常用的 UI 布局，比如代用邊緣和填充的堆疊和嵌入。React Native 還支援常見的 Web 樣式，比如 fontWeight 和 StyleSheet 抽象，它們提供了一種優化機制來宣稱你所有的樣式和布局在元件中的應用是正确的，且元件把它們應用到了内網中。

var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({

      <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

        </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 { Text } = React;

var GeoInfo = React.createClass({

  getInitialState: function() {

    return { position: 'unknown' };

  componentDidMount: function() {

    navigator.geolocation.getCurrentPosition(

      (position) => this.setState({position}),

      (error) => console.error(error)

      <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"];]]);

}

// JavaScript

var { NativeModules, Text } = React;

var Message = React.createClass({

    getInitialState() {

      return { text: 'Goodbye World.' };

    },

    componentDidMount() {

      NativeModules.MyCustomModule.processString(this.state.text, (text) => {

        this.setState({text});

      });

      <Text>{this.state.text}</Text>

自定義的 iOS 視圖可以通過子類化 RCTViewManager，實作 -(UIView *)view 方法并用 RCT_EXPORT_VIEW_PROPERTY 宏導出屬性的辦法來公開。然後一個簡單的 JavaScript 檔案會連接配接這些點。

 #import "RCTViewManager.h"

@interface MyCustomViewManager : RCTViewManager

@implementation MyCustomViewManager

- (UIView *)view

  return [[MyCustomView alloc] init];

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);

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/