使用WebStorm初始化React Native项目步骤

1. 初始化项目：打开WebStorm，当前使用来开发React Native的IDE是WebStorm，版本为WebStorm 2017.2.5的正式版，可以去官网下载，破解方法在这里。

image

2. 点击WebStorm面板上的Create New Project按钮，进入创建React Native项目页面，在左侧选项中选择React Native选项，同时在右侧的Location:中修改项目的本地路径untitled描述，此描述标识项目的名称，例如：StudyReactNativeApp，随下的两个路径保持默认，然后点击右侧底部Create按钮。

image

3.随后在WebStrom中即可看见刚才创建的项目，WebStrom会自动初始化配置项目所需要的组件和库

image

3.配置完成时会提示如下图的信息，到这里项目已初始化完成，即可选择在模拟器上运行查看效果：

• 在android模拟器上运行的命令：react-native run-android
• 在iOS模拟器上运行的命令：react-native run-ios，这里可以直接在WebStorm底下左侧集成的终端中运行以上命令，这里选择查看下android的效果：
  image

4.命令运行后这里一般可能会出现的错误：

第一个错误如下图：提示工程找不到我们的android SDK。

image

解决方法：在工程的根目录下的android文件下直接新建或是拷贝一个已有Android项目的local.properties的文件即可放入其中即可，注意.properties文件的内容就只有标识SDK的路径即可，如下：

这里的USERNAME就是当前电脑的用户名，放入其中后再次运行上面的Android命令。

image

第二个错误如下：提示Genymotion的默认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的模拟器路径即可。点击setting -> ADB -> ANdroid SDK中输入当前Android的SDk即可。

image

5.当运行命令运行完成时，终端会提示如下信息，即表示已成功运行到Andoid模拟器上：

image

到Andoid模拟器桌面点击StudyReactNativeApp App查看效果如下：

image

在iOS模拟器上查看效果，一般在iOS模拟器运行都不会有什么问题。

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

image

把项目上传至自己的Github仓库：

1.进入项目所在的文件夹：cd ../StudyReactNativeApp
2.初始化项目git仓库： git init
3.添加远程仓库地址关联：git remote add origin https://github.com/luocheng2013/StudyReactNativeApp.git
4.添加项目本地所有文件到版本控制：git add .
5.提交项目到本地仓库： git commit -m"初始化ReactNative项目"
6.推送项目到远程仓库： git push origin master
7.上传项目至Github仓库完成。