lyman 发表于 2016-9-18 16:51:59

终极Windows系统下React Native环境搭建教程(超详)!!!

本帖最后由 lyman 于 2016-12-21 14:47 编辑

由于react-native环境搭建比较麻烦,经过参考网上多种搭建方法,利用多台电脑不同windows的版本搭建总结步骤如下:
说明:个人觉得windows7,windows10搭建基本一致,不同之处下面会进行说明,再则react-native环境搭建跟CPU没有关系(intel和AMD)的都行。

好了,下面开始搭建react-native环境:
1、安装Python
      官网下载地址:https://www.python.org/downloads/,当前版本2.7.12,react-native官方文档有说明3.X以上React Native不支持,所以必须下载底于3.X版本的Pythom。
      增加环境变量:
         (1)、在系统变量中添加:PYTHON_HOME,值:D:\Python27 (这个必须写自己安装的Pythom目录一致)
         (2)、在系统变量Path中添加两个变量值:;%PYTHON_HOME%;%PYTHON_HOME%\Scripts(注意最前面要加英文小写分号)
      验证是否安装成功:python --version


2、安装git(请选windwos版的下载安装)
      官方下载地址:https://git-for-windows.github.io/ 当前版本2.10.0
      安装步骤:
                (1)、选择 Use a TrueType font in all console windows
                (2)、选择 Windows Command Prompt
                (3)、选择 Checkout Windows-style,commit Unix-style line endings
                (4)、选择 Use Windows default console window
                (5)、全选(有的第二个Enable Git Credendialc Manager是灰色的就不理它了)
      环境变量正常情况下会自动添加到系统变量path,验证是否安装成功:git --version


3、安装JDK(自行下载安装)
      官方下载地址:http://www.oracle.com/technetwor ... dex-jsp-138363.html 当前版本1.8.0_102
      安装步骤:(忽略,默认选项,下一步,下一步...完成)
      增加环境变量:
             (1)、在系统变量中添加:JAVA_HOME,值如:D:\jdk (这个必须写自己安装的SDK目录一致)
             (2)、在系统变量Path中添加两个变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
      验证是否安装成功:java -version


4、配置android环境
      由于墙的原因,就到http://www.androiddevtools.cn/找到SDK Tools对应的电脑操作系统版本,下载当前windows系统对应版本为installer_r24.4.1-windows.exe
      安装步骤:(忽略,默认选项,下一步,下一步...完成)
    增加环境变量:
             (1)、在系统变量中添加:ANDROID_HOME,值如:D:\sdk (这个必须写自己安装的SDK目录一致)
             (2)、在系统变量Path中添加两个变量值:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools


5、打开SDK目录运行SDK Manager.exe文件
      注意:如果打不开,一闪而过,说明系统环境变量没有设置好:
      安装相关包文件如下图(需要安装的基本上都是这些了):
            




6、安装C++环境
      首先查看自己计算机是否已经安装有Microsoft Visual C++ xxx Redistributable运行库,xxx为2013版本或者2015版本,如果没有请按下面地址下载
    (1)、微软官方下载地址:
      2013版本:http://www.microsoft.com/zh-CN/download/details.aspx?id=40784
      2015版本:https://www.microsoft.com/en-us/download/details.aspx?id=48145
      安装步骤:(忽略,默认选项,下一步,下一步...完成)
    (2)、确保.NET Framework已安装(控制面板程序卸载可看到,我的电脑目前.NET Framework版本为4.5.2)
            如果没有安装,请自行下载安装(忽略,默认选项,下一步,下一步...完成)
    (3)、可选项:(安装Visual C++ Build Tools 或者 Visual Studio 2015,推荐前者,后者包太大,安装很慢,占用系统空间很大)
            Visual C++ Build Tools官网下载地址:http://landinghub.visualstudio.com/visual-cpp-build-tools
            Visual Studio 2015官网下载地址:https://www.visualstudio.com/products/visual-studio-community-vs


7、安装Nodejs
    官网下载地址:https://nodejs.org,当前版本为6.4.0
    安装步骤:(忽略,默认选项,下一步,下一步...完成)
      (1)、环境变量会自动添加到path,验证是否安装成功:node -v
      (2)、配置国内淘宝镜像(墙的存在):
                      命令行输入(注意是两条命令,分别输入后回车):
                npm config set registry https://registry.npm.taobao.org --global
                npm config set disturl https://npm.taobao.org/dist --global
      (3)、配置python版本
                命令行输入:npm config set python python2.7


8、如果第6步的第(3)项可选项安装了,下面的需要配置:
      命令行输入(注意是两条命令,分别输入后回车):
      说明:第5步nodejs必须先安装,要不npm用不了。
      npm install -g node-gyp
      npm config set msvs_version 2015


9、安装React Native命令行
      官网下载地址:https://github.com/facebook/react-native 完成之后解压,进入文件目录react-native/react-native-cli下,
    按住Shift键右键打开命令行窗口(win10下需要以管理员身份运行命令行窗口),命令行输入:npm install -g react-native-cli
    验证是否安装成功:react-native -v
    win10下能会遇到提示系统无react-native命令等,需要在系统变量的path里增加react-native的路径(安装后命令窗口会提示安装路径)


10、创建自己的React Native项目
      想在哪里创建项目就在哪儿按住Shift键右键打开命令行窗口,命令行输入:react-native init LiuYi(LiuYi为自己的创建的项目名,改任意取名,注意驼峰命名)创建工程时间较长,耐心等待,首次创建需要下载gradle2.4、jcenter等依赖库(自备翻墙)


11、运行Packager Server
      (1)、命令行cd进入自己的工程(LiuYi)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令:react-native start
      (2)、看到后在浏览器里输入http://localhost:8081/index.android.bundle?platform=android打开,过一会看运行的脚本代码说明打包成功


12、连接手机
      运行adb devices,验证手机是否连接成功


13、运行自己的React Native项目
      (1)、命令行cd进入自己的工程(LiuYi)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令:react-native run-android
      (2)、说明:期间有可能会报一些error,多半是SDK Manager.exe里的相关包没能安装,按提示安装后,重新运行即可,也有可能不会报错。


如有问题,在此回复问题描述,一起交流。

lyman 发表于 2016-9-18 16:52:00

本人win7系统安装后的环境变量参考如下:
ANDROID_HOME         
D:\Android\sdk

JAVA_HOME               
D:\Java\jdk1.8.0_102

Path                           
C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;D:\Program Files\TortoiseSVN\bin;D:\wamp\bin\php\php5.5.12;C:\Program Files (x86)\ComposerSetup;D:\phpunit\vendor\bin;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;D:\RN_softwares\Git\cmd;D:\RN_softwares\nodejs\

路径如下:
C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Win
dows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\Int
el(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files
(x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Component
s\IPT;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;D:\Program Files\TortoiseSVN\bin;D:\wamp\bin\php\php5.
5.12;C:\Program Files (x86)\ComposerSetup;D:\phpunit\vendor\bin;D:\Java\jdk1.8.0_102\bin;D:\Java\jdk1.8.0_102\jre\bin;D:
\Android\sdk\tools;D:\Android\sdk\platform-tools;D:\RN_softwares\Git\cmd;D:\RN_softwares\nodejs\;C:\Users\cpr098\AppData
\Roaming\npm

longjiacheng 发表于 2016-9-26 17:46:36

楼主在搭建环境时,有你遇到下面问题吗?我是按照你的步骤操作,不知道是什么原因有下面问题:
D:\longjiacheng\self\React Native学习\RN_prj>react-native init helloworld
This may take some time...
prompt: Directory helloworld already exists. Continue?:(no) yes
This will walk you through creating a new React Native project in D:\longjiachen
g\self\React Native学习\RN_prj\helloworld
Installing react-native package from npm...
D:\longjiacheng\self\React Native学习\RN_prj\helloworld\node_modules\react-nativ
e\packager\react-packager\src\node-haste\index.js:40
constructor({
            ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) (D:\longjiacheng\
self\React Native学习\RN_prj\helloworld\node_modules\react-native\node_modules\b
abel-register\lib\node.js:154:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\longjiacheng\self\React Native学习\RN_prj\hellowor
ld\node_modules\react-native\local-cli\server\util/attachHMRServer.js:11:34)
    at Module._compile (module.js:409:26)

lyman 发表于 2016-9-27 09:01:29

longjiacheng 发表于 2016-9-26 17:46
楼主在搭建环境时,有你遇到下面问题吗?我是按照你的步骤操作,不知道是什么原因有下面问题:
D:\longjiac ...

你先不要搞中文目录。换个英文目录创建项目试试。

longjiacheng 发表于 2016-9-27 10:57:31

lyman 发表于 2016-9-27 09:01
你先不要搞中文目录。换个英文目录创建项目试试。

多谢楼主,换成英文的目录OK了,如下:
D:\longjiacheng\self\React Native Stu\RN_prj>react-native init Long
This may take some time...
This will walk you through creating a new React Native project in D:\longjiachen
g\self\React Native Stu\RN_prj\Long
Installing react-native package from npm...
Setting up new React Native app in D:\longjiacheng\self\React Native Stu\RN_prj\
Long
react@15.3.2 node_modules\react
├── object-assign@4.1.0
├── loose-envify@1.2.0 (js-tokens@1.0.3)
└── fbjs@0.8.4 (immutable@3.8.1, ua-parser-js@0.7.10, promise@7.1.1, isomorph
ic-fetch@2.2.1, core-js@1.2.7)
To run your app on iOS:
   cd D:\longjiacheng\self\React Native Stu\RN_prj\Long
   react-native run-ios
   - or -
   Open D:\longjiacheng\self\React Native Stu\RN_prj\Long\ios\Long.xcodeproj in
Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device c
onnected
   cd D:\longjiacheng\self\React Native Stu\RN_prj\Long
   react-native run-android

D:\longjiacheng\self\React Native Stu\RN_prj>

longjiacheng 发表于 2016-9-27 14:43:09

楼主,在执行react-native run-android的时候,有遇到过下面的错误吗?
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/im
agepipeline-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/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/facebook/fresco/imagepipeline-okhttp3/0
.11.0/imagepipeline-okhttp3-0.11.0.aar
Download https://jcenter.bintray.com/com/facebook/soloader/soloader/0.1.0/soload
er-0.1.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/google/code/findbugs/jsr305/3.0.0/jsr30
5-3.0.0.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/squareup/okhttp3/okhttp-ws/3.4.1/okhttp
-ws-3.4.1.jar
Download https://jcenter.bintray.com/org/webkit/android-jsc/r174650/android-jsc-
r174650.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:prepareComFacebookReactReactNative0340Library
: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
Exception in thread "png-cruncher_2" java.lang.RuntimeException: Timed out while
waiting for slave aapt process, try setting environment variable SLAVE_AAPT_TIM
EOUT to a value bigger than 5 seconds
      at com.android.builder.png.AaptProcess.waitForReady(AaptProcess.java:104
)
      at com.android.builder.png.QueuedCruncher$1.creation(QueuedCruncher.java
:107)
      at com.android.builder.tasks.WorkQueue.run(WorkQueue.java:206)
      at java.lang.Thread.run(Thread.java:745)
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest
:app:processDebugResources
:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
D:\longjiacheng\self\React Native Stu\RN_prj\Long\android\app\src\main\java\com\
long\MainActivity.java:1: 错误: 需要<标识符>
package com.long;
            ^
D:\longjiacheng\self\React Native Stu\RN_prj\Long\android\app\src\main\java\com\
long\MainApplication.java:1: 错误: 需要<标识符>
package com.long;
            ^
D:\longjiacheng\self\React Native Stu\RN_prj\Long\android\app\build\generated\so
urce\r\debug\com\long\R.java:8: 错误: 需要<标识符>
package com.long;
            ^
D:\longjiacheng\self\React Native Stu\RN_prj\Long\android\app\build\generated\so
urce\buildConfig\debug\com\long\BuildConfig.java:4: 错误: 需要<标识符>
package com.long;
            ^
4 个错误
:app:compileDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 27 mins 45.349 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html


D:\longjiacheng\self\React Native Stu\RN_prj\Long>
D:\longjiacheng\self\React Native Stu\RN_prj\Long>

lyman 发表于 2016-9-27 17:25:03

6楼的兄弟,你在\你的项目名\android\app\build\outputs\apk目录下,有没有生成
app-debug.apk
app-debug-unaligned.apk
这两个文件

longjiacheng 发表于 2016-9-28 11:15:03

lyman 发表于 2016-9-27 17:25
6楼的兄弟,你在\你的项目名\android\app\build\outputs\apk目录下,有没有生成
app-debug.apk
app-debug-u ...

没有\android\app\build\outputs\apk这个目录,更没有***.apk了

lyman 发表于 2016-9-28 14:55:46

把你遇到的措错发到群里,问兄弟们是否预到过类似的。

longjiacheng 发表于 2016-9-28 14:56:41

longjiacheng 发表于 2016-9-28 11:15
没有\android\app\build\outputs\apk这个目录,更没有***.apk了

删了之前的工程,重新建一个后,又可以了。
页: [1] 2
查看完整版本: 终极Windows系统下React Native环境搭建教程(超详)!!!