良许Linux教程网 干货合集 快速上手React Native

快速上手React Native

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

u=772923460,1872500738&fm=11&gp=0

环境

  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,一个简单的说明页面, react native 第一次主页面

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部