久久一二三四区,日韩美女被操网站,久久久免费1

1.RN的環(huán)境配置

1.1 Windows的RN環(huán)境配置

軟件需要

注意電腦位數(shù)是32/64位對應(yīng)的軟件可能會(huì)不同。

1.1.1 Nodejs

Nodejs是ReactNative 的運(yùn)行基礎(chǔ)。

下載鏈接：https://nodejs.org/en/download/，可以根據(jù)自己電腦系統(tǒng)位數(shù)選擇下載。

安裝過程中，選擇默認(rèn)的安裝方法即可，安裝目錄可以自己選擇，選擇C盤或者其他盤。如果node目錄不在系統(tǒng)環(huán)境變量PATH中（目前的nodejs是默認(rèn)設(shè)置好的），需要設(shè)置下，如果node安裝目錄是C:\nodejs，那么如下設(shè)置：

PATH新增路徑;C:\nodejs。

如果安裝并設(shè)置好路徑，可以在終端中輸入node -v查看到nodejs的版本號。

1.1.2 Git

GIt用于代碼管理，與svn類似的工具，同時(shí)在ReactNative中會(huì)用Git獲取githup上的部分依賴。

下載鏈接：https://git-scm.com/downloads，可以根據(jù)自己電腦系統(tǒng)位數(shù)選擇下載。

安裝完成后，需要設(shè)置系統(tǒng)環(huán)境變量。如果Git安裝目錄是C:\Git，那么需要進(jìn)行如下設(shè)置：PATH新增路徑;C:\Git\bin

1.1.3 JDK

JDK是Java的運(yùn)行環(huán)境

下載鏈接：

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html選擇合適版本下載。

安裝后需要設(shè)置下系統(tǒng)環(huán)境變量，如果JDK安裝目錄是C:\Jdk，那么需要如下設(shè)置：

新增環(huán)境變量JAVA_HOME設(shè)置為C:\Jdk

新增環(huán)境變量CLASSPATH設(shè)置為.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

環(huán)境變量PATH新增路徑;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

設(shè)置完成之后，可以在命令行輸入java -version查看，若出現(xiàn)以下jdk的版本號，則jdk設(shè)置正確。

1.1.4 Android Studio

Android Studio是用于Android sdk等等的管理，也是Android開發(fā)工具。

下載地址：http://www.android-studio.org/index.php/download選擇自己需要的版本下載，下載的安裝程序包含了Android SDK，過程中會(huì)對SDK進(jìn)行解壓，3G大小，請注意盤符空間是否夠。

安裝后需要設(shè)置系統(tǒng)環(huán)境變量。

如果安裝的路徑是D:\Program Files\Android\sdk，則需要如下設(shè)置：

新增變量ANDROID_HOME為D:\Program Files\Android\sdk

在PATH變量中新增路徑

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

之后可以在命令行輸入adb查看是否安裝成功。

1.1.5 Genymotion

該工具是安卓虛擬機(jī)，它依賴VirtualBox的引擎。安裝過程中也會(huì)安裝VirtualBox。

下載地址：http://pan.baidu.com/s/1btavqY

Genymotion需要注冊一個(gè)帳號(注冊入口)，之后個(gè)人就可以免費(fèi)使用了，也會(huì)提供很多版本的手機(jī)Model供選擇。

可以點(diǎn)擊Add新建一個(gè)模擬器，切記一定要在Settings中ADB下設(shè)置SDK的路徑。

1.1.6安裝react-native命令工具

在命令行中安裝react-native-cli，如下：

安裝過程可能會(huì)比較慢，可以從國內(nèi)的包管理拉取。npm install -g react-native-cli --registry=https://registry.npm.taobao.org

安裝完成以后，react-native在終端就可以使用了。

1.1.7安裝Sublime Text3

Sublime Text3用于對RN代碼的編寫。

下載地址：http://www.sublimetext.com/3

1.2 Mac的RN環(huán)境配置

1.2.1所需軟件

安裝步驟基本與Windows系統(tǒng)一致，所需軟件在上述提供的鏈接中選擇合適版本安裝。并且Mac下安裝上述軟件不需手動(dòng)配置環(huán)境變量，系統(tǒng)會(huì)自動(dòng)配好。Genymotion可選擇安裝。

1.2.2 Xcode

React Native目前需要Xcode 7.0或更高版本。你可以通過App Store或是到Apple開發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝Xcode IDE和Xcode的命令行工具。

雖然一般來說命令行工具都是默認(rèn)安裝了，但你最好還是啟動(dòng)Xcode，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode的命令行工具中也包含一些必須的工具，比如git等。

2.RN基礎(chǔ)

2.1認(rèn)識RN

下面是從搜狐上看到的一片文章，可以看看，了解一下到底什么是RN。

React Native-目前最火的前端技術(shù)

做為一名產(chǎn)品經(jīng)理，你是否遇到過這樣的窘境，“幫我把字體調(diào)成16號唄，顏色變成#FFFF00FF，老大說這里最好改一下”，作為一名app的開發(fā)只能無奈但心里竊喜的告訴你，“只能等下個(gè)版本了，必須要重新發(fā)布才能改”，如果你問為什么不能改了就生效啊，那說明你對技術(shù)的理解要么真的很差，要么你就是知道這項(xiàng)React-Native新技術(shù)所爆發(fā)出來的力量。

React Native是Facebook推出的一個(gè)用Java語言就能同時(shí)編寫ios，android，以及后臺(tái)的一項(xiàng)技術(shù)，2015年9月發(fā)布了android版本，又在程序員里面掀起了一波小高潮，不斷有喜歡嘗鮮的程序員投入到這個(gè)領(lǐng)域。

用大白話說，就是從此一名程序員自己就可以創(chuàng)業(yè)了，他只用這一門技術(shù)，就可以同時(shí)寫出androidapp，ios app，以及后臺(tái)應(yīng)用程序，并且，請注意這里，它可以做到實(shí)時(shí)熱更新（就像網(wǎng)頁一樣，改了一個(gè)字體，隨時(shí)可上線），app也能做到隨時(shí)都能更新了，第一段講的那個(gè)需求可以分分鐘秒殺解決，不用新發(fā)版本，只需在服務(wù)器改動(dòng)一下代碼即可，是不是很牛逼，是不是很牛逼，是不是很牛逼，真的很牛逼。

到這里，你只需要理解一句話，就是Facebook提供了一套解決方案，它利用Java作為開發(fā)語言，可以同時(shí)來編寫前端，移動(dòng)終端，后臺(tái)應(yīng)用程序。

我們再來講講，為什么React Native受到了如此大的關(guān)注，以及它的優(yōu)越性到底在什么地方。

目前，一個(gè)成熟的互聯(lián)網(wǎng)產(chǎn)品基本囊括了：移動(dòng)終端和網(wǎng)頁兩種主要形態(tài)。在移動(dòng)終端app和網(wǎng)頁的開發(fā)歷程中，涉及了很多技術(shù)角色：前端開發(fā)（俗名叫做網(wǎng)站的），移動(dòng)終端開發(fā)（android和ios開發(fā)，現(xiàn)在滿大街都是），后臺(tái)開發(fā)（他們的程序大多沒有界面，主要是為網(wǎng)頁和app提供數(shù)據(jù)和保障服務(wù)的穩(wěn)定性），每個(gè)角色各司其職，分別需要不同的技能，比如前端開發(fā)需要精通html，css，java這些基本的web語言知識。Android開發(fā)用Java（這個(gè)詞讀“扎瓦”，別讀成了“加瓦”，讀成這樣很Low B的）語言編寫，ios開發(fā)用Objective-c（把他想象成當(dāng)年過計(jì)算機(jī)二級的那個(gè)C語言就可以了）編寫。后臺(tái)開發(fā)，有的公司用Java，有的公司用C++，用啥的都有，能滿足性能需要就可以了。

已經(jīng)看崩潰了吧，對于一個(gè)非計(jì)算機(jī)專業(yè)的人，根本不會(huì)理解他媽的為什么要存在這么多語言，為什么這里要用C語言，那里要用C++，有的地方要用Python，而又有很大的一個(gè)人群對你高呼：“PHP才是世界最好的語言”。其實(shí)他們每種語言都有不同的使用場景，有的語言效率高，有的語言語法更簡潔漂亮，有的是專為后臺(tái)而生，有的是特定場景下的唯一選擇。如果你還聽不懂，我們就用大白話做個(gè)比喻，為什么避孕套有的是螺紋的，有的是顆粒的，有的是延時(shí)的，有的是超薄的，還有一個(gè)品牌號稱一只手就可以打開的，它們也都是依據(jù)個(gè)人身體狀態(tài)，以及不同場景分別發(fā)揮各自的強(qiáng)項(xiàng)。你隨便類比，任何一個(gè)領(lǐng)域，都有很多不同的工具來滿足不同的場景，是需求決定了當(dāng)前狀態(tài)。

現(xiàn)在好了，React整套解決方案完成了江湖統(tǒng)一，F(xiàn)aceBook也號稱這們技術(shù)是“Learn Once，Write AnyWhere”，學(xué)習(xí)成本只有一次，卻完成了所有開發(fā)角色的統(tǒng)一。

這意味著：

1.app將來都是可像網(wǎng)頁一樣熱更新，隨時(shí)發(fā)布。

2.對于一名開發(fā)人員，將再也沒有前端，終端，后臺(tái)的區(qū)分，他所關(guān)注的就是做一整套應(yīng)用程序，人力將得到最大幅度的整合與釋放。

3.代碼復(fù)用將會(huì)是主旋律，因?yàn)槭且环N語言，大家重復(fù)造輪子的成本會(huì)越來越節(jié)省。

目前，React Native也還是有一些缺點(diǎn)的，比如他的sdk組件包size還比較大，crash還比較多，在ios上支持的內(nèi)容已經(jīng)相當(dāng)不錯(cuò)，android還屬于初級階段，但是目前最新的版本也才是0.16，相信再過一年，一定會(huì)牛逼閃閃。

2.2 Reactjs基礎(chǔ)學(xué)習(xí)

在正式學(xué)習(xí)RN之前，建議先學(xué)一些Reactjs的內(nèi)容，對一些方法有一個(gè)認(rèn)識，下面提供的學(xué)習(xí)內(nèi)容可以簡單的學(xué)習(xí)一下，可以進(jìn)入訪問地址查看具體的描述。

訪問地址:http://www.ruanyifeng.com/blog/2015/03/react.html

進(jìn)入訪問地址之后，可以將一些Demo下載下來，自己照著說明編寫代碼并運(yùn)行，查看效果，有一個(gè)直觀的認(rèn)識，拒絕眼高手低，光看不練。

3.RN項(xiàng)目創(chuàng)建與運(yùn)行

3.1新建項(xiàng)目

創(chuàng)建新項(xiàng)目，項(xiàng)目名稱為Test，可事先在任意盤符創(chuàng)建一個(gè)文件夾，之后在命令行進(jìn)入該盤符的該文件夾，然后輸入react-native init Test。

注：創(chuàng)建時(shí)間可能會(huì)比較長，那是在下載相關(guān)依賴，耐心等待即可。

3.2項(xiàng)目的目錄結(jié)構(gòu)

android目錄是Android項(xiàng)目的目錄，里面有Android Studio項(xiàng)目環(huán)境文件。

ios目錄是iOS項(xiàng)目目錄，是XCode項(xiàng)目環(huán)境文件。

index.android.js是Android入口文件。

index.ios.js是iOS入口文件。

node_modules是項(xiàng)目的依賴包，基于node文件依賴系統(tǒng)產(chǎn)生的，該目錄中有react-native相關(guān)的依賴和其他的第三方lib

package.json是項(xiàng)目依賴包的說明文件，列舉了依賴的包以及版本號等等信息。

3.3運(yùn)行項(xiàng)目

項(xiàng)目創(chuàng)建完成，接下來就是要運(yùn)行項(xiàng)目，此處分別說明模擬器與真機(jī)如何運(yùn)行項(xiàng)目。

3.2.1模擬器運(yùn)行

Android執(zhí)行方法：

第一步，開啟安卓模擬器，使模擬器成為可用狀態(tài)，在命令行輸入adb devices 可查看模擬器是否開啟。上述會(huì)列出當(dāng)前可以使用的設(shè)備，如果列表為空，則后續(xù)的無法運(yùn)行。

第二步，開啟一個(gè)命令行控制臺(tái)，進(jìn)入項(xiàng)目目錄，第一次運(yùn)行最好先執(zhí)行npm install，然后執(zhí)行react-native start上述命令是開啟jsbundle服務(wù)器，用于測試設(shè)備上Reload JS的服務(wù)器。

第三步, 再開啟一個(gè)新的命令行控制臺(tái)，進(jìn)入項(xiàng)目目錄react-native run-android