React Native安裝和使用（基於android端）（一）

/***
 * React Native的安裝
 * 說明：我的qq號：1457521527；歡迎互相學習~
 *  @author yjbo
 *  @create 2017年3月24日23:37
 */

轉載請標明：http://blog.csdn.net/yangjianbo456/article/details/65697174

react-native系列

一、React Native安裝和使用（基於android端）（一）

二、React Native開發工具、插件（二）

開發文檔

React Native中文官網：http://reactnative.cn/docs/0.42/getting-started.html#content

React Native的安裝過程比較麻煩；需要各種配置，當初爲了配置，整合了各種資源，梳理了以下的步驟，一步一步走上安裝React Native之路；主要是進行以下幾步：

下面摘抄React Native官網的安裝說明文檔，###紅色的部分爲注意的地方；

1.使用網絡

(http://60.22.129.117:443/down/57c700414f70485b3615fc997bb7e022-5116968/LT.exe?cts=f-D1A180A215A79&ctp=1A180A215A79&ctt=1490362981&limit=1&spd=200000&ctk=0be15a49b69e1cdd976ef346605d2d11&chk=57c700414f70485b3615fc997bb7e022-5116968)

2.Chocolatey

2.Chocolatey是一個Windows上的包管理器，類似於linux上的yum和 apt-get。 你可以在其官方網站上查看具體的使用說明。一般的安裝步驟應該是下面這樣：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

一般來說，使用Chocolatey來安裝軟件的時候，需要以管理員的身份來運行命令提示符窗口。譯註：chocolatey的網站可能在國內訪問困難，導致上述安裝命令無法正常完成。請使用穩定的翻牆工具。 如果你實在裝不上這個工具，也不要緊。下面所需的python2和nodejs你可以分別單獨去對應的官方網站下載安裝即可。

3.Python 2

打開命令提示符窗口，使用Chocolatey來安裝Python 2.

注意目前不支持Python 3版本。

choco install python2

配置環境變量：檢查python2是否已經安裝完成；

4.Node

( ###我這裏是用直接下載的，沒用cmd，cmd一直下載不下來)

[nodejs安裝包下載](http://6dddx.pc6.com/wwb3/node695x64.zip)，[nodejs更多安裝包](http://nodejs.cn/)（[nodejs安裝步驟](http://www.cnblogs.com/starof/p/5194716.html)） （沒用nodejs下面的下載方法） 打開命令提示符窗口，使用Chocolatey來安裝NodeJS。注意，目前已知Node 7.1版本在windows上無法正常工作，請避開這個版本！

choco install nodejs.install

安裝完node後建議設置npm鏡像以加速後面的過程（或使用科學上網工具）。注意：不要使用cnpm！cnpm安裝的模塊路徑比較奇怪，packager不能正常識別！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

    ###npm  ==='npm' 不是內部或外部命令，也不是可運行的程序或批處理文件。此時得注意是否是node環境變量沒有配置；

環境變量：NODE_PATH：D:\nodejs\node_global 　　　　　Path：D:\nodejs\node_global;D:\nodejs\node_global\node_modules [node環境變量配置](http://www.cnblogs.com/mora1988/p/6484211.html)

5.Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

npm install -g yarn react-native-cli

安裝完yarn後同理也要設置鏡像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

/**
* yarn 不是內部定義；錯誤：
* 這時需要安裝yarn；下面有yarn安裝步驟：
* *安裝完成yarn之後再進行設置
* yarn config set registry https://registry.npm.taobao.org --global
* yarn config set disturl https://npm.taobao.org/dist --global
* ；然後就可以進行react-native功能；
*/

yarn安裝步驟

6.然後新建react-native項目：

測試安裝
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
提示：你可以使用--version參數創建指定版本的項目。例如react-native init MyApp --version 0.39.2。注意版本號必須精確到兩個小數點。
Windows用戶請注意，請不要在命令行默認的System32目錄中init項目！會有各種權限限制導致不能運行！

手動運行Packager
有個常見的問題是在你運行react-native run-android命令後，Packager可能不會自動運行。此時你可以手動啓動它：

cd AwesomeProject
react-native start

一般使用的也就3行代碼：

1.react-native init AwesomeProject(--新建項目；)cd AwesomeProject（切換到該項目目錄）
2.react-native start（在項目目錄下啓動react-native服務）
3.react-native run-android（在項目目錄下將項目運行到android模擬機上）；

但是一般會遇到端口號8081被佔用；

7.端口被佔用的處理方法

參考文檔：如何用DOS命令查看佔用某端口的程序及PID號
將衝突的端口號關閉，一般都是nodejs軟件，控制檯結束進程就好；

解決玩這些問題之後就可以實現效果了。完成react-native的第一個項目的創建；

參考了下面幾個鏈接：

1.React Native中文官網：http://reactnative.cn/docs/0.42/getting-started.html#content
2.http://blog.csdn.net/wx_jin/article/details/51086565
3.nodejs安裝包下載
4.nodejs更多安裝包
5.nodejs安裝步驟
6.node環境變量配置
7.yarn安裝
8.如何用DOS命令查看佔用某端口的程序及PID號

工具：

1.下載地址：點擊下載