React Native基礎

1、簡介

1.1、React概念

React是facebook提出的一個Javascript庫，其核心在於快速的構建用戶界面。其官方介紹爲：
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。

1.2、React特點

1.2.1、虛擬DOM

React與Javascript不同的是，React提出了虛擬DOM的概念。在Javascript裏，更新視圖時，需要清空DOM容器中的內容，然後將新的DOM和數據添加到容器。
而React將視圖的變化放在內存進行比較，即比較保存在內存中的虛擬DOM。當視圖發生變化時，React通過比較虛擬DOM計算出差異部分，得到最小更新視圖，從而提高性能，加快渲染速度。

1.2.2、JSX語法

在React中提出了JSX語法，類似xml的語法（an XML-like syntax）。該語法能在Javascript代碼中編寫類似xml的標籤語句來操作和構建html界面，其目的在於提高效率及增加代碼可讀性。

示例代碼：

<script type="text/babel">
  var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello, React</h1>;
      }
  });
  React.render(<HelloMessage />, document.getElementById('example'));
</script>

從示例可以看出，該段javascript代碼中包含了html代碼及其他標籤語句。這樣的語法簡化了DOM操作頁面元素的過程。
但JSX語句只能直觀的看到DOM的結構，它並不能直接在瀏覽器運行。React內部會對JSX語法進行處理，還原成Javascript和HTML代碼。
所以，編寫完全不使用的JSX語法的React代碼是允許及可行的。

1.3、React Native概念

React Native是基於React設計，目的在於用React來構建原生應用，提高開發效率。其官方介紹爲：
A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT。

2、React Native開發環境及項目創建

使用React Native開發原生App應用，需要Node.js的支持（Node.js簡介）。
在安裝過程中會提示需要Node.js 4.0及以上的版本支持，所以需要注意版本的選擇，在開發過程中出現問題時需要考慮是否是版本問題。(Node.js版本可以通過nvm工具管理)
官網也建議安裝Watchman(A file watching service)。

2.1、安裝react-native-cli命令行工具

通過如下命令

$sudo npm install -g react-native-cli

其中npm是Node.js管理模塊的一個命令工具，會跟隨Node.js的安裝而附帶安裝。-g表示全局安裝，react-native-cli是react native的命令工具。

2.2、創建項目

安裝完react-native-cli工具後，則可以通過命令來創建項目。
通過如下命令

$react-native init AwesomeProject

創建一個名稱爲AwesomeProject的項目。項目結構如下：

ios可以通過Xcode打開./AwesomeProject/ios/AwesomeProject.xcodeproj文件導入ios項目，android可以通過Android Studio導入android目錄導入工程。
React Native代碼ios和android分別存放在index.ios.js和index.android.js文件中。

2.3、運行項目

通過如下命令可以運行項目
(cd AwesomeProject，確保當前目錄爲AwesomeProject）

$react-native run-ios // 運行ios

$react-native run-android // 運行android

在通過命令運行android時，會啓動一個packager server的終端。
其次，可以將項目到導入到Xcode或者Android studio等IDE，點擊run進行運行。android需要提前啓動package終端，否則會報錯。

2.4、代碼釋義

代碼文件參見附件，此處以index.android.js爲例。

2.4.1、導入react相關模塊

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

2.4.2、創建組件AwesomeProject

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Hello,React Natve Study Group!!!
        </Text>
      </View>
    );
  }
}

其中系統回調方法render負責具體的UI繪製，return返回的是一個視圖樹，從中可以看到使用了React中定義的UI組件。

2.4.3、CSS樣式設置

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

在React Native中通過StyleSheet.create方法來創建css。在UI組件中通過style屬性引用樣式，也可以類似css直接將樣式以屬性方式書寫。
其中，需要注意的是React native中樣式的書寫與css的區別。在React native中需要將樣式名稱以駝峯的形式書寫，例如在React native中
用backgroundColor定義背景色，而在css中則爲background-color。

2.4.4、將內容渲染到頁面

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

將自定義的AwesomeProject組件註冊到容器，從而調用組件的render方法顯示UI。

3、常用組件

View是構建UI的最基礎組件，它是一個容器，可以容納其他的UI組件。Text是一個展示文本的組件，類似android中TextView。
其他的如Button，ListView，ScrollView，TextInput等，都是構建UI的基礎組件，具體用法及更多組件參見官網的Components部分。使用React Native提供的UI組件則可以構建豐富的界面。

4、總結

4.1、React是一個用於構建界面的Javascript庫，而React Native是基於React，用web思維來構建原生應用的框架。
4.2、使用React Native需要Node.js支持。

5、常見問題

在android真機上運行時，如果出現Unknown failure ([CDS]close[0])錯誤，則是由於gradle版本過高引起的。可以通過降低gradle版本解決，也可以通過如下方式解決
adb devices
查詢出android設備號
然後利用如下命令運行

react-native run-android –deviceId xxx

6、參考網址

react
react native
Node.js維基百科
 網絡博客
 JSX語法
 Watchman