设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2103|回复: 11

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

[复制链接]

4

主题

195

帖子

496

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
496
发表于 2016-9-18 16:51:59 | 显示全部楼层 |阅读模式
本帖最后由 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文件
        注意:如果打不开,一闪而过,说明系统环境变量没有设置好:
        安装相关包文件如下图(需要安装的基本上都是这些了):
111.png        222.png        333.png




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里的相关包没能安装,按提示安装后,重新运行即可,也有可能不会报错。


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

回复

使用道具 举报

4

主题

195

帖子

496

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
496
 楼主| 发表于 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
回复 支持 反对

使用道具 举报

0

主题

235

帖子

508

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
508
发表于 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) [as .js] (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)
回复 支持 反对

使用道具 举报

4

主题

195

帖子

496

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
496
 楼主| 发表于 2016-9-27 09:01:29 | 显示全部楼层
longjiacheng 发表于 2016-9-26 17:46
楼主在搭建环境时,有你遇到下面问题吗?我是按照你的步骤操作,不知道是什么原因有下面问题:
D:\longjiac ...

你先不要搞中文目录。换个英文目录创建项目试试。
回复 支持 反对

使用道具 举报

0

主题

235

帖子

508

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
508
发表于 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>
回复 支持 反对

使用道具 举报

0

主题

235

帖子

508

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
508
发表于 2016-9-27 14:43:09 | 显示全部楼层
楼主,在执行react-native run-android的时候,有遇到过下面的错误吗?
Download https://jcenter.bintray.com/com/ ... epipeline-base/0.11
.0/imagepipeline-base-0.11.0.aar
Download https://jcenter.bintray.com/com/ ... epipeline/0.11.0/im
agepipeline-0.11.0.aar
Download https://jcenter.bintray.com/com/ ... co/0.11.0/fresco-0.
11.0.aar
Download https://jcenter.bintray.com/com/ ... .9.0/okio-1.9.0.jar

Download https://jcenter.bintray.com/com/ ... ttp/3.4.1/okhttp-3.
4.1.jar
Download https://jcenter.bintray.com/com/ ... epipeline-okhttp3/0
.11.0/imagepipeline-okhttp3-0.11.0.aar
Download https://jcenter.bintray.com/com/ ... loader/0.1.0/soload
er-0.1.0.aar
Download https://jcenter.bintray.com/com/ ... re/jackson-core/2.2
.3/jackson-core-2.2.3.jar
Download https://jcenter.bintray.com/com/ ... /jsr305/3.0.0/jsr30
5-3.0.0.jar
Download https://jcenter.bintray.com/com/ ... ttp-urlconnection/3
.4.1/okhttp-urlconnection-3.4.1.jar
Download https://jcenter.bintray.com/com/ ... ttp-ws/3.4.1/okhttp
-ws-3.4.1.jar
Download https://jcenter.bintray.com/org/ ... 174650/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>
回复 支持 反对

使用道具 举报

4

主题

195

帖子

496

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
496
 楼主| 发表于 2016-9-27 17:25:03 | 显示全部楼层
6楼的兄弟,你在\你的项目名\android\app\build\outputs\apk目录下,有没有生成
app-debug.apk
app-debug-unaligned.apk
这两个文件
回复 支持 反对

使用道具 举报

0

主题

235

帖子

508

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
508
发表于 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了
回复 支持 反对

使用道具 举报

4

主题

195

帖子

496

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
496
 楼主| 发表于 2016-9-28 14:55:46 | 显示全部楼层
把你遇到的措错发到群里,问兄弟们是否预到过类似的。
回复 支持 反对

使用道具 举报

0

主题

235

帖子

508

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
508
发表于 2016-9-28 14:56:41 | 显示全部楼层
longjiacheng 发表于 2016-9-28 11:15
没有\android\app\build\outputs\apk这个目录,更没有***.apk了

删了之前的工程,重新建一个后,又可以了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-9-23 01:21 , Processed in 0.164488 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表