軟件介紹

ReactNative是一款功能強大的移動開發(fā)工具。ReactNative可以讓用戶在Javascript和React的基礎上獲得完全一致的開發(fā)體驗，同時React Native已經(jīng)用于生產(chǎn)環(huán)境！

功能介紹

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

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

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

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

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

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

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

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

主要特性

原生的iOS組件

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

異步執(zhí)行

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

觸摸處理

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

ReactNative項目創(chuàng)建教程

1、安裝node。

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

安裝成功后，配置環(huán)境變量 在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

安裝成功后配置環(huán)境變量

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

4、通過命令窗口切換到想要創(chuàng)建項目的根目錄下，然后運行 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系統(tǒng)是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，最后顯示如下界面就是成功啦。