一、前言

1.準(zhǔn)備

在創(chuàng)建RN之前，我們需要先安裝相應(yīng)的工具和搭建環(huán)境。
可以參考我上一篇文章：React Native入門(mén)系列：如何搭建RN環(huán)境（Windows篇）

2.目標(biāo)

本章例子中文章達(dá)到目標(biāo)：

• 創(chuàng)建RN項(xiàng)目步驟
• 在創(chuàng)建中遇見(jiàn)的問(wèn)題解決
• 配置WebStrom

建議下載最新版WebStrom： 官方最新版WebStrom下載地址

• 使用WebStorm+AndroidStudio來(lái)寫(xiě)RN程序

3.項(xiàng)目地址

二、開(kāi)啟大表哥代碼模式

1.創(chuàng)建RN項(xiàng)目

• 在E盤(pán)根目錄下 創(chuàng)建一個(gè)ReactSpace文件夾 用于儲(chǔ)存RN項(xiàng)目

• cmd打開(kāi)dos命令窗口，開(kāi)始創(chuàng)建RN項(xiàng)目，如下命令：

  react-native init FirstRNProject
  

初始化創(chuàng)建項(xiàng)目.png

• 當(dāng)你的項(xiàng)目創(chuàng)建完畢后，會(huì)在你所指定創(chuàng)建的文件夾下面多出一個(gè)文件夾，這個(gè)就是你當(dāng)前創(chuàng)建的RN Project，用webStrom打開(kāi)項(xiàng)目，目錄結(jié)構(gòu)大致如下：

RN項(xiàng)目結(jié)構(gòu).png

• 此刻我們應(yīng)該啟動(dòng)服務(wù)端（packager），我們新打開(kāi)一個(gè)cmd窗口，定位到項(xiàng)目根目錄，命令如下：

    react-native start 
  

或者

    npm start

啟動(dòng)服務(wù)端.png

• 啟動(dòng)完成后，先關(guān)聯(lián)設(shè)備，這樣才能夠在手機(jī)上面正常調(diào)試：

手機(jī)的wifi和電腦處于同一個(gè)局域網(wǎng)下面，并使用8081端口（切記要保證手機(jī)和電腦在同一網(wǎng)段，且沒(méi)有防火墻阻攔）。
可通過(guò)ipconfig命令查看電腦IP

查看IP.png

然后在手機(jī)上面手動(dòng)添加代理

手動(dòng)代理.png

手機(jī)添加關(guān)聯(lián)完畢！（這個(gè)時(shí)候你用手機(jī)打開(kāi)任意App可以看見(jiàn)你的npm在跑）

• 打開(kāi)手機(jī)調(diào)試模式連接電腦，新建一個(gè)cmd窗口（切記 保持服務(wù)端（packager）在運(yùn)行），在項(xiàng)目根目錄下輸入運(yùn)行命令（以Android為例子），命令如下：

    react-native run-android
  

等命令執(zhí)行完畢，app會(huì)自動(dòng)運(yùn)行并且打開(kāi)
這個(gè)時(shí)候有的手機(jī)會(huì)顯示一片紅色，這個(gè)時(shí)候，一般是服務(wù)端正在加載數(shù)據(jù)或者加載錯(cuò)誤，解決辦法就是點(diǎn)擊下面中間的RELOAD重新加載,或者等一會(huì)兒。

加載錯(cuò)誤.png

有的手機(jī)做完了上面所有步驟，發(fā)現(xiàn)界面一片空白，這種情況是因?yàn)閼腋〈皺?quán)限被禁用，去權(quán)限管理里面打開(kāi)權(quán)限，重新打開(kāi)APP，就可以解決該情況。
啟動(dòng)成功界面應(yīng)該是下圖：

成功結(jié)果.png

此時(shí)此刻，你已經(jīng)能夠自己創(chuàng)建項(xiàng)目并且運(yùn)行了。

2.安裝配置WebStrom

注意：建議使用2017系列版本的WebStrom，因?yàn)楹竺嫖覀円玫絥pm功能，老版本是沒(méi)有的。

• 安裝WebStrom

文章開(kāi)頭我已經(jīng)給出了最新版WebStrom下載地址，這里我說(shuō)一下2017版本破解方法：
2017.2.27更新
選擇“l(fā)icense server” 輸入：http://idea.imsxm.com/
2016.2.2 版本的破解方式：
安裝以后，打開(kāi)軟件會(huì)彈出一個(gè)對(duì)話框；選擇“l(fā)icense server” 輸入：http://114.215.133.70:41017

• 導(dǎo)入項(xiàng)目

點(diǎn)擊Open，打開(kāi)項(xiàng)目，點(diǎn)開(kāi)index_android.js發(fā)現(xiàn)有報(bào)錯(cuò)，原因是由于 React Native 是基于 React 的，而 React 使用的是 JSX 語(yǔ)法，因此，使用 WebStorm 開(kāi)發(fā) React Native 之前，我們首先需要設(shè)置支持的 Javascript 語(yǔ)法，點(diǎn)擊 WebStorm-Preferences，在打開(kāi)的對(duì)話框中選擇 Javascript language version 為 React JSX(有的版本是JSX Harmony) 即可在代碼編輯器中識(shí)別 JSX。

設(shè)置JSX.png

• 配置npm

維基百科，什么是npm（全稱(chēng)Node Package Manager，即node包管理器）？

點(diǎn)擊Edit Configurations

配置npm.png

點(diǎn)擊添加一個(gè)npm

添加npm.png

配置npm參數(shù)

參數(shù)配置.png

配置成功后，現(xiàn)在我們回到編輯界面基本上就可以裝逼了

• 啟動(dòng)服務(wù)

首先，我們可以關(guān)閉之前我們用cmd啟動(dòng)的服務(wù)，現(xiàn)在改為直接在WebStrom來(lái)啟動(dòng)這個(gè)服務(wù)，如圖：

啟動(dòng)服務(wù).png

這個(gè)時(shí)候我們就可以很容易出現(xiàn)以下錯(cuò)誤

錯(cuò)誤.png

提示 “Packager can’t listen on port 8081” ，說(shuō)明 8081 端口被占用，這里有兩個(gè) 解決方案：

方案一： 可以檢查是什么程序占用了這個(gè)端口并殺掉它

方案二：修改默認(rèn)8081端口（記得手機(jī)設(shè)備端口號(hào)對(duì)應(yīng)修改）

• 方式一：?jiǎn)?dòng)服務(wù)前，使用如下命令，改變端口號(hào)

  react-native start --port 8083
  

• 方式二：手動(dòng)修改項(xiàng)目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下圖所示。

修改端口.png

完了過(guò)后就可以愉快的啟動(dòng)服務(wù)了。

打開(kāi)IDE中的terminal窗口（切記 不要關(guān)閉服務(wù),保持run窗口的數(shù)據(jù)在跑）
然后，輸入命令： react-native run-android 回車(chē)安裝到手機(jī)
這樣，通過(guò)WebStrom就完成了整個(gè)RN程序運(yùn)行。現(xiàn)在我們就可以開(kāi)始用代碼搞事情了。

搞事情.gif

下面，我都以Android RN程序?yàn)槔樱?br> 打開(kāi)index.android.js文件可以修改，然后 react-native run-android重新安裝

修改后.png

Load完成后，效果如下：

效果.png

• WebStrom的代碼自動(dòng)提示配置

1.clone ReactNative-LiveTemplate項(xiàng)目到本地
React Native默認(rèn)不能智能提示代碼，github有一個(gè)開(kāi)源的插件：ReactNative-LiveTemplate開(kāi)源地址。
ReactNative的代碼模板,包括:
組件名稱(chēng)
Api 名稱(chēng)
所有StyleSheets屬性
Mac中調(diào)用ReactNative組件時(shí), 首先 按下 command + J , 然后輸入屬性名的 首字母 如輸入onP 自動(dòng)提示 onPress, onPressIn, onPressOut, ....

2.添加ReactNative.jar導(dǎo)入到setting

導(dǎo)入setting.png

導(dǎo)入成功后，效果如下：

導(dǎo)入后.png

說(shuō)明代碼智能提示設(shè)置導(dǎo)入成功！

2.使用WebStrom+AndroidStudio協(xié)作開(kāi)發(fā)

• WebStrom用做服務(wù)端，保持服務(wù)開(kāi)啟，并且在WebStrom中可以修改js邏輯代碼

• AndroidStudio可以用于安裝APP，和修改Android App原生代碼

1.導(dǎo)入RN項(xiàng)目結(jié)構(gòu)中的android到AS中，等待build成功，如下圖

AndroidStudio界面.png

2.現(xiàn)在我們可以run來(lái)安裝APP可以替代 react-native run-android命令

快速運(yùn)行.png

三、RN學(xué)習(xí)推薦

• WebStorm的基本配置：http://blog.csdn.net/gz_jero/article/details/51503374
• RN中文網(wǎng)：http://reactnative.cn/
• React入門(mén)教程： https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
• ECMAScript 6 入門(mén) ： http://wiki.jikexueyuan.com/project/es6/style.html
• ReactNative零基礎(chǔ)入門(mén)到項(xiàng)目實(shí)戰(zhàn)(藍(lán)鷗免費(fèi)公開(kāi)課) ：http://www.jingyingba.com/Home/coursedetails/index/pid/67
• React Native調(diào)試技巧與心得：http://blog.csdn.net/quanqinyang/article/details/52215652
• React Native 練習(xí)項(xiàng)目Github地址：https://github.com/CarGuo/LearnProject

如果我的文章有幫助到您，請(qǐng)點(diǎn)個(gè)贊，您的鼓勵(lì)將是我寫(xiě)作的最大動(dòng)力