快速上手React Native

React Native 是facebook 开源的一套用于开发移动端跨平台App的技术框架，下面为大家讲解一下React Native安装和使用。

环境

1. 安装homebrew
   
2. 安装nodejs
   
3. 安装watchman、flow
   
4. 安装react-native
   

新建项目

react-native init JustNoCode

执行之后，一直卡在Installing react-native package from npm…，但是， 我等了两天，终于成功了：

@feng   github  react-native init JustNoCodeprompt: Directory JustNoCode already exist. Continue?:  (no) yThis will walk you through creating a new React Native project in /Users/fengjian/Code/github/JustNoCodeInstalling react-native package from npm...Setting up new React Native app in /Users/fengjian/Code/github/JustNoCodecreate .gitignorecreate .watchmanconfigcreate index.ios.jscreate index.Android.jscreate ios/main.jsbundlecreate ios/JustNoCode/AppDelegate.hcreate ios/JustNoCode/AppDelegate.mcreate ios/JustNoCode/Base.lproj/LaunchScreen.xibcreate ios/JustNoCode/Images.xcassets/AppIcon.appiconset/Contents.jsoncreate ios/JustNoCode/Info.plistcreate ios/JustNoCode/main.mcreate ios/JustNoCodeTests/JustNoCodeTests.mcreate ios/JustNoCodeTests/Info.plistcreate ios/JustNoCode.xcodeproj/project.pbxprojcreate ios/JustNoCode.xcodeproj/xcshareddata/xcschemes/JustNoCode.xcschemecreate android/app/build.gradlecreate android/app/proguard-rules.procreate android/app/src/main/AndroidManifest.xmlcreate android/app/src/main/res/values/strings.xmlcreate android/app/src/main/res/values/styles.xmlcreate android/build.gradlecreate android/gradle.propertiescreate android/settings.gradlecreate android/app/src/main/res/mipmap-hdpi/ic_launcher.pngcreate android/app/src/main/res/mipmap-mdpi/ic_launcher.pngcreate android/app/src/main/res/mipmap-xhdpi/ic_launcher.pngcreate android/app/src/main/res/mipmap-xxhdpi/ic_launcher.pngcreate android/gradle/wrapper/gradle-wrapper.jarcreate android/gradle/wrapper/gradle-wrapper.propertiescreate android/gradlewcreate android/gradlew.batcreate android/app/src/main/Java/com/justnocode/MainActivity.javaTo run your app on iOS:Open /Users/fengjian/Code/github/JustNoCode/ios/JustNoCode.xcodeproj in XcodeHit Run buttonTo run your app on Android:Have an Android emulator running, or a device connectedcd /Users/fengjian/Code/github/JustNoCodereact-native run-android

显示详细信息

运行Android

react-native run-android

结果报错，如下：

@feng   JustNoCode (master)  react-native run-androidStarting JS server...Building and installing the app on the device (cd android && ./gradlew installDebug)...Download https://jcenter.bintray.com/com/android/tools/build/gradle/1.3.1/gradle-1.3.1.pomDownload https://jcenter.bintray.com/com/android/tools/build/gradle-core/1.3.1/gradle-core-1.3.1.pom... ...Download https://jcenter.bintray.com/com/android/tools/lint/lint-api/24.3.1/lint-api-24.3.1.jarFailed to notify ProjectEvaluationListener.afterEvaluate(), but primary configuration failure takes precedence.java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.    at com.android.build.gradle.internal.SdkHandler.getAndCheckSdkFolder(SdkHandler.java:102)    ... ...    at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMainin.java:61)FAILURE: Build failed with an exception.* Where:Build file '/Users/fengjian/Code/github/JustNoCode/android/app/build.gradle' line: 20* What went wrong:A problem occurred evaluating project ':app'.> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILEDTotal time: 52.605 secsCould not install the app on the device, see the error above.

显示详细信息

在.zshrc中配置一下ANDROID_HOME:

export ANDROID_HOME=~/Tools/android-sdk

再运行一次，

@feng   JustNoCode (master)  react-native run-androidJS server already running.Building and installing the app on the device (cd android && ./gradlew installDebug)...:app:preBuild UP-TO-DATE... ...:app:installDebugInstalling APK 'app-debug.apk' on 'Google Nexus S - 4.1.1 - API 16 - 480x800 - 4.1.1'Installed on 1 device.BUILD SUCCESSFULTotal time: 10.294 secsThis build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.htmlStarting the app (/Users/fengjian/Tools/android-sdk/platform-tools/adb shell am start -n com.justnocode/.MainActivity)...Starting: Intent { cmp=com.justnocode/.MainActivity }

显示详细信息

成功了，显示了MainActivity，一个简单的说明页面,