當前 RN 版本：0.48
操作環(huán)境：Windows 10
我們從 Hello World 項目開始，進入 React Native 的世界娄帖。
初始化項目
在你想創(chuàng)建項目的目錄下按下 Shift + 鼠標右鍵昙楚，選擇命令行工具：
然后在命令行輸入以下命令，按下回車等待項目初始化削葱。注意項目名稱中間不能有空格淳梦，否則只取空格前半部分作為項目名。
react-native init 你的項目名稱
這是個漫長的過程爆袍，一定要耐心等待。出現(xiàn)類似下面的信息弦疮，代表初始化成功蜘醋。
提示：你可以使用
--version參數(shù)創(chuàng)建指定版本的項目。例如react-native init 你的項目名稱 --version 0.48.3。注意版本號必須精確到兩個小數(shù)點编检。
注意： 官方文檔上寫了這么一句話：
Windows 用戶請注意扰才，請不要在命令行默認的 System32 目錄中 init 項目！會有各種權(quán)限限制導致不能運行累驮！
所以給大家的建議是在你需要創(chuàng)建項目的目錄下打開命令行工具舵揭，并且安裝 yarn躁锡，這樣初始化項目的成功率非常高。關(guān)于 yarn 的相關(guān)配置映之，可以參考我的上一篇文章 Windows 平臺環(huán)境配置 。
項目結(jié)構(gòu)
初始化完成赎败，可以看到如圖所示的結(jié)構(gòu)蠢甲，接單介紹幾個重要的目錄/文件：
-
android：Android 工程文件，可通過 Android Studio 直接打開搞糕； -
ios：iOS 工程文件曼追，可用過 XCode 打開； -
index.android.js：在 Android 設(shè)備上運行時的入口文件礼殊； -
index.ios.js：在 iOS 設(shè)備上運行時的入口文件； -
package.json：項目配置文件碟狞。
運行
首先啟動你的 Android 模擬器坝辫，可以通過以下指令查看當前可用設(shè)備：
adb devices
然后在控制臺切換到你要運行的項目目錄內(nèi)，記住是目錄內(nèi)，運行以下指令：
react-natvie run-android
當然你也可以通過 WebStorm 的 Terminal 終端窗口直接運行智润。
編譯時會自動打開一個包服務器未辆，請不要關(guān)閉。
如果由于系統(tǒng)或其他原因?qū)е缕浔蛔詣雨P(guān)閉的咐柜，可通過下面的命令重新打開：
npm start
如果你是首次運行的話拙友，可能由于缺失 gradle 等原因需要下載一堆東西，下載不順利請自備梯子或者手動下載遗契。運行成功程序自動啟動：
可這并不是我們想要的 Hello World，修改代碼：
然后在模擬器上漾根，雙擊 R 鍵進行刷新（如果你關(guān)閉了包服務器鲫竞，這一步會報錯），就能看到我們的 Hello World 了寄疏。
開發(fā)者菜單
按下 F1 或者 Ctrl + M 或者模擬器的菜單鍵顶考，都可以打開開發(fā)者菜單。手機則是搖晃驹沿。
-
Reload：與雙擊R鍵效果一致渊季，重新加載； -
Debug JS Remotely：打開瀏覽器調(diào)試却汉，在瀏覽器中按下Ctrl + Shift + J打開開發(fā)者工具； -
Enable Live Reload：打開實時加載青扔。修改代碼保存后會自動重新加載 APP，不過這是重新編譯整個項目，所以每次重新加載后又回到了項目首頁谈息； -
Enable Hot Reloading：打開熱加載凛剥。熱加載的思想是運行時動態(tài)注入修改后的文件內(nèi)容，同時不中斷 APP 的正常運行犁珠，基本上看不出刷新的效果，類似于局部刷新犁享。如果你在二級頁面修改了代碼，那么熱加載后仍然顯示的是二級頁面溺森； -
Toggle Inspector：打開或關(guān)閉檢查器窑眯，可以查看組件的布局医窿、網(wǎng)絡(luò)、觸摸等信息姥卢。 -
Show Perf Monitor：可以顯示模擬器的幀率等信息； -
Start/Stop Sampling Profiler：這個我真的沒搞明白是做什么用的僧叉； -
Dev Settings：一些設(shè)置棺榔。
沒有錯，這個項目簡直弱爆了症歇。如果你想要做出一些更有意思的東西，就要持續(xù)學習宛蚓，并且 Keep Coding。下一篇文章將會寫一寫自己的學習建議凄吏，與大家共勉。
文章同步自 CSDN：http://blog.csdn.net/qq_24867873/article/details/78051373
