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

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