一、前言

1.準備

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

2.目標

本章例子中文章達到目標：

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

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

• 使用WebStorm+AndroidStudio來寫RN程序

3.項目地址

二、開啟大表哥代碼模式

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

• 在E盤根目錄下 創(chuàng)建一個ReactSpace文件夾 用于儲存RN項目

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

  react-native init FirstRNProject
  

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

• 當你的項目創(chuàng)建完畢后，會在你所指定創(chuàng)建的文件夾下面多出一個文件夾席揽，這個就是你當前創(chuàng)建的RN Project顽馋，用webStrom打開項目，目錄結(jié)構大致如下：

RN項目結(jié)構.png

• 此刻我們應該啟動服務端（packager）幌羞，我們新打開一個cmd窗口寸谜，定位到項目根目錄，命令如下：

    react-native start 
  

或者

    npm start

啟動服務端.png

• 啟動完成后属桦，先關聯(lián)設備熊痴，這樣才能夠在手機上面正常調(diào)試：

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

查看IP.png

然后在手機上面手動添加代理

手動代理.png

手機添加關聯(lián)完畢！（這個時候你用手機打開任意App可以看見你的npm在跑）

• 打開手機調(diào)試模式連接電腦亏吝，新建一個cmd窗口（切記 保持服務端（packager）在運行），在項目根目錄下輸入運行命令（以Android為例子）盏混，命令如下：

    react-native run-android
  

等命令執(zhí)行完畢蔚鸥，app會自動運行并且打開
這個時候有的手機會顯示一片紅色，這個時候许赃，一般是服務端正在加載數(shù)據(jù)或者加載錯誤止喷，解決辦法就是點擊下面中間的RELOAD重新加載,或者等一會兒。

加載錯誤.png

有的手機做完了上面所有步驟混聊，發(fā)現(xiàn)界面一片空白弹谁，這種情況是因為懸浮窗權限被禁用，去權限管理里面打開權限句喜，重新打開APP预愤，就可以解決該情況。
啟動成功界面應該是下圖：

成功結(jié)果.png

此時此刻咳胃，你已經(jīng)能夠自己創(chuàng)建項目并且運行了植康。

2.安裝配置WebStrom

注意：建議使用2017系列版本的WebStrom，因為后面我們要用到npm功能展懈，老版本是沒有的销睁。

• 安裝WebStrom

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

• 導入項目

點擊Open，打開項目来惧，點開index_android.js發(fā)現(xiàn)有報錯冗栗，原因是由于 React Native 是基于 React 的，而 React 使用的是 JSX 語法，因此贞瞒，使用 WebStorm 開發(fā) React Native 之前偶房，我們首先需要設置支持的 Javascript 語法，點擊 WebStorm-Preferences军浆，在打開的對話框中選擇 Javascript language version 為 React JSX(有的版本是JSX Harmony) 即可在代碼編輯器中識別 JSX棕洋。

設置JSX.png

• 配置npm

維基百科，什么是npm（全稱Node Package Manager乒融，即node包管理器）掰盘？

點擊Edit Configurations

配置npm.png

點擊添加一個npm

添加npm.png

配置npm參數(shù)

參數(shù)配置.png

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

• 啟動服務

首先赞季，我們可以關閉之前我們用cmd啟動的服務愧捕，現(xiàn)在改為直接在WebStrom來啟動這個服務，如圖：

啟動服務.png

這個時候我們就可以很容易出現(xiàn)以下錯誤

錯誤.png

提示 “Packager can’t listen on port 8081” 申钩，說明 8081 端口被占用次绘，這里有兩個 解決方案：

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

方案二：修改默認8081端口（記得手機設備端口號對應修改）

• 方式一：啟動服務前，使用如下命令撒遣，改變端口號

  react-native start --port 8083
  

• 方式二：手動修改項目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件邮偎，如下圖所示。

修改端口.png

完了過后就可以愉快的啟動服務了义黎。

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

搞事情.gif

下面，我都以Android RN程序為例子：
打開index.android.js文件可以修改狐蜕，然后 react-native run-android重新安裝

修改后.png

Load完成后宠纯，效果如下：

效果.png

• WebStrom的代碼自動提示配置

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

2.添加ReactNative.jar導入到setting

導入setting.png

導入成功后征椒，效果如下：

導入后.png

說明代碼智能提示設置導入成功！

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

• WebStrom用做服務端湃累，保持服務開啟勃救，并且在WebStrom中可以修改js邏輯代碼

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

1.導入RN項目結(jié)構中的android到AS中治力，等待build成功蒙秒，如下圖

AndroidStudio界面.png

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

快速運行.png

三、RN學習推薦

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

如果我的文章有幫助到您宵统，請點個贊晕讲，您的鼓勵將是我寫作的最大動力