react Native 搭建開發環境

建議查看React Native中文網中的說明，這里介紹的非常詳細。注意選擇你所在的開發平臺環境。這個地址就是搭建開發環境介紹。

http://reactnative.cn/docs/0.46/getting-started.html#content

根據你要搭建的平臺選擇，比如我選擇的是目標ios+android 與mac平臺。（在此我不在啰嗦了）

查看react native 可用用的命令行工具

搭建環境后，在終端執行如下命令：

react-native -help

顯示的結果

初始化（新建）--項目一 FirstApp項目的命令是

react-native init FirstApp

這時命令會對項目進行一些初始化，會到國外下載一些依賴庫，可能需要一點點時間。請稍等。

運行--項目命令：

這個命令reactNatvie會自動完成ios或 Android 對應 reactNative項目的編譯

react-native run-ios

iso會自動啟動iphone模擬器，command +D 可以打開Iphone模擬器的開發菜單。

運行錯誤特別解決方案：http://www.cnblogs.com/dragon-aslan/p/6965014.html

注意：如果mac中的ios模擬器現實太大，可以在菜單simulator菜單/windows/Scale/ 中選擇縮放比率

react-native run-android

Android 需要自己手動啟動模擬器，我用的是genymotion模擬器

記住要先進入reactNative 的項目目錄，否則會報錯誤如下：

Make sure that you have run `npm install` and that you are inside a react-native project.

react Native 調試快捷鍵

查看運行界面中有提示 ，比如ios中是command +R 表示重載，command +D 表示彈出開放菜單。

在 Android 模擬器中雙擊R 表示加載，command+M 彈出調試菜單

真機上你可以通過搖一搖手機來打開Develpoer Menu開發者菜單

奇怪的的是我在Android 4.4版本運行出現白屏

react Native 項目--結構

_tests_目錄是js測試的一些項目

其中 node——modules 是項目所依賴的一些npm包，通過npm install 命令安裝的包都會被放在這里。

package.json是npm的一些配置文件

在xcode 中打開項目，并運行（iso部分）

在 finder中直接雙擊ios 目錄中的 FirstApp.xcodeProj文件就可以在xcode中打開這個react native 對應的iso 工程。

然后可以直接運行 （選擇你對應的iso模擬器即可）

在Android studio 中打開項目，并運行（android 部分）

在 Android studio打開 react native 項目下的Android 目錄打開這個react native 對應的Android工程。

然后可以直接運行 （選擇你對應的Android模擬器如genymontion即可）

開放工具的選擇

webStorm （推薦）

配置參見：

webStorm for mac

webstorm上語法高粱eslint的安裝命令： npm i -g eslint

Nuclide +Watchman （Mac 平臺）

Sublime

atom:facebook

附加：

• 配置React native運行環境(這樣就可以直接在webStorm中直接運行到Android模擬器)http://www.jianshu.com/p/0a795f942248

• ReactNative的WebStorm基本設置http://blog.csdn.net/xiangzhihong8/article/details/52293896

• React項目新手指南—首選開發工具WebStorm:https://www.w3ctech.com/topic/1496

• ReactNative-開發工具Atom+Nuclide詳解（安裝、使

• http://www.hangge.com/blog/cache/detail_1490.html

分享是一種美德，牽手是一種生活方式。

最后感謝提供的分享平臺，你覺得有用可以收藏方便以后查閱。