軟件介紹

ReactNative是一款功能強大的移動開發工具。ReactNative可以讓用戶在Javascript和React的基礎上獲得完全一致的開發體驗，同時React Native已經用于生產環境！

功能介紹

React Native的原理是在JavaScript中用React抽象操作系統原生的UI組件，代替DOM元素來渲染，比如以取代，以替代等。

在幕后，React Native在主線程之外，在另一個背景線程里運行JavaScript引擎，兩個線程之間通過一批量化的async消息協議來通信（有一個專門的React插件）。

UI方面React Native提供跨平臺的類似Flexbox的布局系統，還支持CSS子集。可以用JSX或者普通JavaScript語言，還有CoffeeScript和TypeScript來開發。有評論說，React的UI層模型要比UIKit好很多。

更好的是，由于基于Web技術，開發起來可以像在瀏覽器里那樣隨時在仿真程序中查看應用運行情況，刷新一下就行，無需編譯，爽吧。

React Native比起標準Web開發或原生開發能夠帶來的三大好處：

1、手勢識別：基于Web技術（HTML5/JavaScript）構建的移動應用經常被抱怨缺乏及時響應。而基于原生UI的React Native能避免這些問題從而實現實時響應。

2、原生組件：使用HTML5/JavaScript實現的組件比起原生組件總是讓人感覺差一截，而React Native由于采用了原生UI組件自然沒有此問題。

3、樣式和布局：iOS、Android和基于Web的應用各自有不同的樣式和布局機制。React Native通過一個基于FlexBox的布局引擎在所有移動平臺上實現了一致的跨平臺樣式和布局方案。

主要特性

原生的iOS組件

React Native主張“Learn once, write everywhere”而非其他跨平臺工具一直宣揚的“Write once, run everywhere”。通過React Native，開發者可以使用UITabBar、UINavigationController等標準的iOS平臺組件，讓應用界面在其他平臺上亦能保持始終如一的外觀、風格。

異步執行

JavaScript應用代碼和原生平臺之間所有的操作都采用異步執行模式，原生模塊使用額外線程，開發者可以解碼主線程圖像、后臺保存至磁盤、無須顧忌UI等諸多因素直接度量文本設計布局。

觸摸處理

React Native引入了一個類似于iOS上Responder Chain響應鏈事件處理機制的響應體系，并基于此為開發者提供了諸如TouchableHighlight等更高級的組件。

ReactNative項目創建教程

1、安裝node。

下載地址： https://nodejs.org

安裝成功后，配置環境變量 在path中添加：

在命令窗口測試node 是否配置成功：

node -v

輸出node版本即為成功

2、通過命令：$npm install -g react-native-cli

注：如果遇到Cannot find module 'npmlog', 可以嘗試命令：$curl -0 -L https://npmjs.org/install.sh | sudo sh

確保react-native安裝成功，可以用檢查版本的命令來檢查react-native命令： $react-native -v

3、安裝Git

下載地址：http://git-scm.com/download/win

安裝成功后配置環境變量

類似于第一步：path中添加 D:\react_native\git\Git\cmd

4、通過命令窗口切換到想要創建項目的根目錄下，然后運行 react-native init MyProject（項目名稱）

最后會顯示：

To run your app on iOS:   cd D:\Users\XXX\MyTest   react-native run-ios   - or -   Open ios\MyTest.xcodeproj in Xcode   Hit the Run buttonTo run your app on Android:   cd D:\Users\XXX\MyTest   Have an Android emulator running (quickest way to get started), or a device connected   react-native run-android

5、切換到自己項目下：cd MyProject

運行 npm install （安裝node_modules）

6、安裝node_modules成功后，運行react-native run-android 即可。

7、在瀏覽器中輸入http://localhost:8081/index.android.bundle?platform=android 會顯示一長串的json代碼。

8、可能遇到的問題：

如果android系統是5.0以下

1.Could not get BatchedBridge, make sure your bundle is package correctly.

Dev Settings->Debug server host & port for device 修改IP為 充當服務器的PC的ip地址：8081（！！！）。

然后reload，最后顯示如下界面就是成功啦。