开发平台环境(Windows)
1 必备的软件 包括 vscode jdk python nodejs
andriodstudio五个软件 ,下载找度娘
安装C++环境
编译node.js的C++模块需要用到
Windows SDK、mingw cygwin等C++环境。
安装Node.js与Git
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统
2 添加环境变量ANDROID_HOME , 值 Android\sdk 所在目录
3 编辑PATH变量增加 ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
Android 翻墙请使用http://androiddevtools.cn/
下载msysgithttps://git-for-windows.github.io/
建议设置npm镜像
设置全局使用指定的镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
4 拉取Hello World代码 开始吧
输入命令
cmd窗口中
cd Desktop/ (可以指定保存的路径)
npm install -g react-native-cli
react-native init HelloWorld(项目名字)
那么桌面上就有文件夹是该工程的代码了 接下来直接打开 Vistudio Coder 软件打开此文件夹 , 安装上插件
即可编译执行官方给出的demo项目了!
运行packager 进入工程目录
react-native start
用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本
具体是这样的
C:\Users\Administrator\Desktop\HelloWorld>npm Usage: npm <command> where <command> is one of: access, add-user, adduser, apihelp, author, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, dist-tags, docs, edit, explore, faq, find, find-dupes, get, help, help-search, home, i, info, init, install, issues, la, link, list, ll, ln, login, logout, ls, outdated, owner, pack, ping, prefix, prune, publish, r, rb, rebuild, remove, repo, restart, rm, root, run-script, s, se, search, set, show, shrinkwrap, star, stars, start, stop, t, tag, team, test, tst, un, uninstall, unlink, unpublish, unstar, up, update, upgrade, v, version, view, whoami npm <cmd> -h quick help on <cmd> npm -l display full usage info npm faq commonly asked questions npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\Administrator\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@2.15.1 I:\study\DevSoft\nodejs\node_modules\npm C:\Users\Administrator\Desktop\HelloWorld>react-native start ┌──────────────────────────────────────────────────── ────────────────────────┐ │ Running packager on port 8081. │ │ │ │ Keep this packager running while developing on any JS projects. Feel │ │ free to close this tab and run your own packager instance if you │ │ prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └──────────────────────────────────────────────────── ────────────────────────┘ Looking for JS files in C:\Users\Administrator\Desktop\HelloWorld [00:30:29] <START> Building Dependency Graph [00:30:29] <START> Crawling File System [Hot Module Replacement] Server listening on /hot React packager ready. [00:30:46] <START> request:/index.android.bundle?platform=android [00:30:46] <START> find dependencies [00:33:03] <END> Crawling File System (153459ms) [00:33:03] <START> Building in-memory fs for JavaScript [00:33:04] <END> Building in-memory fs for JavaScript (1281ms) [00:33:04] <START> Building in-memory fs for Assets [00:33:05] <END> Building in-memory fs for Assets (974ms) [00:33:05] <START> Building Haste Map [00:33:05] <START> Building (deprecated) Asset Map [00:33:06] <END> Building (deprecated) Asset Map (205ms) [00:33:06] <END> Building Haste Map (817ms) [00:33:06] <END> Building Dependency Graph (156558ms) transformed 631/631 (100%) [00:33:25] <END> find dependencies (159165ms) [00:33:31] <END> request:/index.android.bundle?platform=android (165014ms) ::1 - - [13/Aug/2016:16:33:35 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://localhost:8081/index.android.bundle?platform=android" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" [00:45:29] <START> request:/index.android.bundle?platform=android [00:45:30] <END> request:/index.android.bundle?platform=android (39ms) ::ffff:192.168.31.241 - - [13/Aug/2016:16:45:35 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://192.168.31.241:8081/index.android.bundle?platform=android" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" 接下来另开一个cmd
模拟器或真机 运行android
react-native run-android
具体是这样的
C:\Users\Administrator>cd C:\Users\Administrator\Desktop\HelloWorld
C:\Users\Administrator\Desktop\HelloWorld>react-native run-android
JS server already running.
Running F:\Andriod\sdk/platform-tools/adb reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug...
Download https://jcenter.bintray.com/com/facebook/react/react-native/0.20.1/react-native-0.20.1.pom
Download https://jcenter.bintray.com/com/google/code/findbugs/jsr305/3.0.0/jsr305-3.0.0.pom
Download https://jcenter.bintray.com/org/webkit/android-jsc/r174650/android-jsc-r174650.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-urlconnection/3.4.1/okhttp-urlconnection-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/parent/3.4.1/parent-3.4.1.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-okhttp3/0.11.0/imagepipeline-okhttp3-0.11.0.pom
Download https://jcenter.bintray.com/com/fasterxml/jackson/core/jackson-core/2.2.3/jackson-core-2.2.3.pom
Download https://jcenter.bintray.com/com/fasterxml/oss-parent/10/oss-parent-10.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-ws/3.4.1/okhttp-ws-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp/3.4.1/okhttp-3.4.1.pom
Download https://jcenter.bintray.com/com/squareup/okio/okio/1.9.0/okio-1.9.0.pom
Download https://jcenter.bintray.com/com/squareup/okio/okio-parent/1.9.0/okio-parent-1.9.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/fresco/0.11.0/fresco-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/soloader/soloader/0.1.0/soloader-0.1.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/fbcore/0.11.0/fbcore-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline/0.11.0/imagepipeline-0.11.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/drawee/0.11.0/drawee-0.11.0.pom
Download https://jcenter.bintray.com/com/parse/bolts/bolts-tasks/1.4.0/bolts-tasks-1.4.0.pom
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-base/0.11.0/imagepipeline-base-0.11.0.pom
Download https://jcenter.bintray.com/com/google/code/findbugs/jsr305/3.0.0/jsr305-3.0.0.jar
Download https://jcenter.bintray.com/org/webkit/android-jsc/r174650/android-jsc-r174650.aar
Download https://jcenter.bintray.com/com/squareup/okio/okio/1.9.0/okio-1.9.0.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp/3.4.1/okhttp-3.4.1.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-urlconnection/3.4.1/okhttp-urlconnection-3.4.1.jar
Download https://jcenter.bintray.com/com/facebook/fresco/fbcore/0.11.0/fbcore-0.11.0.aar
Download https://jcenter.bintray.com/com/parse/bolts/bolts-tasks/1.4.0/bolts-tasks-1.4.0.jar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-base/0.11.0/imagepipeline-base-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline/0.11.0/imagepipeline-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-okhttp3/0.11.0/imagepipeline-okhttp3-0.11.0.aar
Download https://jcenter.bintray.com/com/fasterxml/jackson/core/jackson-core/2.2.3/jackson-core-2.2.3.jar
Download https://jcenter.bintray.com/com/squareup/okhttp3/okhttp-ws/3.4.1/okhttp-ws-3.4.1.jar
Download https://jcenter.bintray.com/com/facebook/fresco/drawee/0.11.0/drawee-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/fresco/fresco/0.11.0/fresco-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/soloader/soloader/0.1.0/soloader-0.1.0.aar
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library
:app:prepareComAndroidSupportRecyclerviewV72301Library
:app:prepareComAndroidSupportSupportV42321Library
:app:prepareComFacebookFrescoDrawee0110Library
:app:prepareComFacebookFrescoFbcore0110Library
:app:prepareComFacebookFrescoFresco0110Library
:app:prepareComFacebookFrescoImagepipeline0110Library
:app:prepareComFacebookFrescoImagepipelineBase0110Library
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library
:app:prepareComFacebookReactReactNative0310Library
:app:prepareComFacebookSoloaderSoloader010Library
:app:prepareOrgWebkitAndroidJscR174650Library
:app:prepareDebugDependencies
:app:compileDebugAidl
:app:compileDebugRenderscript
:app:generateDebugBuildConfig
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets
:app:generateDebugResValues
:app:generateDebugResources
:app:mergeDebugResources
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest
:app:processDebugResources
:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug
Installing APK 'app-debug.apk' on 'Mi-4c - 5.1.1'
Unable to install C:\Users\Administrator\Desktop\HelloWorld\android\app\build\outputs\apk\app-debug.apk
欢迎关注我的博客 和 github https://github.com/xingwen93