使用WebStorm初始化React Native項(xiàng)目步驟

1. 初始化項(xiàng)目：打開WebStorm，當(dāng)前使用來(lái)開發(fā)React Native的IDE是WebStorm，版本為WebStorm 2017.2.5的正式版，可以去官網(wǎng)下載，破解方法在這里。

image

2. 點(diǎn)擊WebStorm面板上的Create New Project按鈕，進(jìn)入創(chuàng)建React Native項(xiàng)目頁(yè)面，在左側(cè)選項(xiàng)中選擇React Native選項(xiàng)，同時(shí)在右側(cè)的Location:中修改項(xiàng)目的本地路徑untitled描述，此描述標(biāo)識(shí)項(xiàng)目的名稱，例如：StudyReactNativeApp，隨下的兩個(gè)路徑保持默認(rèn)，然后點(diǎn)擊右側(cè)底部Create按鈕。

image

3.隨后在WebStrom中即可看見剛才創(chuàng)建的項(xiàng)目，WebStrom會(huì)自動(dòng)初始化配置項(xiàng)目所需要的組件和庫(kù)

image

3.配置完成時(shí)會(huì)提示如下圖的信息，到這里項(xiàng)目已初始化完成，即可選擇在模擬器上運(yùn)行查看效果：

• 在android模擬器上運(yùn)行的命令：react-native run-android
• 在iOS模擬器上運(yùn)行的命令：react-native run-ios，這里可以直接在WebStorm底下左側(cè)集成的終端中運(yùn)行以上命令，這里選擇查看下android的效果：
  
  image

4.命令運(yùn)行后這里一般可能會(huì)出現(xiàn)的錯(cuò)誤：

第一個(gè)錯(cuò)誤如下圖：提示工程找不到我們的android SDK。

image

解決方法：在工程的根目錄下的android文件下直接新建或是拷貝一個(gè)已有Android項(xiàng)目的local.properties的文件即可放入其中即可，注意.properties文件的內(nèi)容就只有標(biāo)識(shí)SDK的路徑即可，如下：

這里的USERNAME就是當(dāng)前電腦的用戶名，放入其中后再次運(yùn)行上面的Android命令。

image

第二個(gè)錯(cuò)誤如下：提示Genymotion的默認(rèn)SDK路徑是它自己的ADB路徑，而非我們常用的ADB。

........

04:16:28 E/ddms: '/Users/maowangxin/Library/Android/sdk/platform-tools/adb,start-server' failed -- run manually if necessary
:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. ADB location: /Users/maowangxin/Library/Android/sdk/platform-tools/adb

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1 mins 59.919 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

解決方法：修改下Genymotion的模擬器路徑即可。點(diǎn)擊setting -> ADB -> ANdroid SDK中輸入當(dāng)前Android的SDk即可。

image

5.當(dāng)運(yùn)行命令運(yùn)行完成時(shí)，終端會(huì)提示如下信息，即表示已成功運(yùn)行到Andoid模擬器上：

image

到Andoid模擬器桌面點(diǎn)擊StudyReactNativeApp App查看效果如下：

image

在iOS模擬器上查看效果，一般在iOS模擬器運(yùn)行都不會(huì)有什么問(wèn)題。

直接輸入命令：react-native run-ios
查看效果：

image

把項(xiàng)目上傳至自己的Github倉(cāng)庫(kù)：

1.進(jìn)入項(xiàng)目所在的文件夾：cd ../StudyReactNativeApp
2.初始化項(xiàng)目git倉(cāng)庫(kù)： git init
3.添加遠(yuǎn)程倉(cāng)庫(kù)地址關(guān)聯(lián)：git remote add origin https://github.com/luocheng2013/StudyReactNativeApp.git
4.添加項(xiàng)目本地所有文件到版本控制：git add .
5.提交項(xiàng)目到本地倉(cāng)庫(kù)： git commit -m"初始化ReactNative項(xiàng)目"
6.推送項(xiàng)目到遠(yuǎn)程倉(cāng)庫(kù)： git push origin master
7.上傳項(xiàng)目至Github倉(cāng)庫(kù)完成。