軟件介紹

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

功能介紹

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

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

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

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

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

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

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

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

主要特性

原生的iOS組件

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

異步執(zhí)行

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

觸摸處理

React Native引入了一個(gè)類似于iOS上Responder Chain響應(yīng)鏈?zhǔn)录�處理機(jī)制的響應(yīng)體系，并基于此為開發(fā)者提供了諸如TouchableHighlight等更高級的組件。

ReactNative項(xiàng)目創(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、通過命令窗口切換到想要?jiǎng)?chuàng)建項(xiàng)目的根目錄下，然后運(yùn)行 react-native init MyProject（項(xiàng)目名稱）

最后會(huì)顯示：

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、切換到自己項(xiàng)目下：cd MyProject

運(yùn)行 npm install （安裝node_modules）

6、安裝node_modules成功后，運(yùn)行react-native run-android 即可。

7、在瀏覽器中輸入http://localhost:8081/index.android.bundle?platform=android 會(huì)顯示一長串的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為 充當(dāng)服務(wù)器的PC的ip地址：8081（！！！）。

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