【React Native】React Native 的开发路(Windows 开发环境配置)

xiaoxiao2025-01-26 3

开发平台环境（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

转载请注明原文地址: https://ju.6miu.com/read-1295787.html

最新回复(0)