设为首页收藏本站

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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2528|回复: 6

[环境搭建类] Windows环境下React Native环境配置详解!!!

[复制链接]

9

主题

264

帖子

775

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
775
发表于 2016-7-22 09:26:37 | 显示全部楼层 |阅读模式
本帖最后由 窗外的雪儿飞 于 2016-7-29 09:30 编辑

开题前首先声明:我的操作系统是Windows7 Ultimate(旗舰版)64位的系统。

   一:安装Python(已安装有的可以跳过)

      官网下载地址:https://www.python.org/downloads/,下载2.7.3,有些本可能需要2.7.11,3.X以上React Native不支持。

   环境变量配置:

      1、在系统变量中添加:PYTHON_HOME,值:C:\Python27 (这个是自己的安装目录)

      2、在系统变量Path中添加两个变量值:%PYTHON_HOME%;%PYTHON_HOME%\Scripts

   验证是否安装成功:python --version

            二:安装git(推荐git-for-Windows的)

      官方下载地址:https://git-for-windows.github.io/

   安装步骤:

      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

三、配置android环境

    官网下载地址:http://developer.android.com/sdk/index.html(需要梯子,自行备好)

    安装步骤:(忽略,自行百度,下一步下一步...)

    环境变量配置:

      1、在系统变量中添加:ANDROID_HOME,值:D:\sdk (这个是自己的sdk所在目录)

                              2、在系统变量Path中添加两个变量值:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

   四、安装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、安装步骤:(忽略,下一步下一步...)

    3、可选项:(安装Visual C++ Build Tools 或者 Visual Studio 2015,推荐前者,后者包太大了!!!)安装前提:.NET Framework 4.5.1 需要最低版本是4.5.1(控制面板卸载程序可看)

          Visual C++ Build Tools官网下载地址:http://landinghub.visualstudio.com/visual-cpp-build-tools

          Visual Studio 2015官网下载地址:https://www.visualstudio.com/products/visual-studio-community-vs

          .NET Framework 4.5.1官网下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=40773

    4、如果可选项安装了,这步需要配置:

      命令行输入(注意是两条命令,分别输入):

         npm install -g node-gyp

         npm config set msvs_version 2015

    5、说明:gyp ERR 错误和 Windows_NT 6.1.7601 可执行步骤3和4,详情请看:https://github.com/nodejs/node-gyp#installation

   五、安装Nodejs

        官网下载地址:http://nodejs.cn/download/(看网速)

    安装步骤:(忽略,自行百度,下一步下一步...)

      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

   六、安装React Native命令行

        官网下载地址:https://github.com/facebook/react-native 完成之后解压,进入文件目录react-native/react-native-cli下,

    按住Shift键右键打开命令行窗口,命令行输入:npm install -g react-native-cli

    验证是否安装成功:react-native -v

   七、创建自己的React Native项目

      1、想在哪里创建项目就在哪儿按住Shift键右键打开命令行窗口,命令行输入:react-native init HelloWorld

   2、说明:HelloWorld为自己的项目名,自拟,创建工程时间较长,耐心等待,首次创建可能需要下载gradle2.4文件还有jcenter等等依赖库(自备梯子)

   八、运行Packager Server

      1、命令行cd进入自己的工程(HelloWorld)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令:react-native start

   2、说明:Packager包服务要一直开启

   九、运行自己的React Native项目

      1、命令行cd进入自己的工程(HelloWorld)目录或者直接进入(需要按住Shift键右键打开命令行窗口),输入命令:react-native run-android

   2、说明:期间有可能会报一些error,也有可能不会出现

   十、常见错误解决方案(十全十美,欢迎楼下补充...)

        待续...








回复

使用道具 举报

401

主题

762

帖子

6969

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6969
发表于 2016-7-24 21:43:49 | 显示全部楼层
不错,点个赞!
react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复 支持 反对

使用道具 举报

3

主题

24

帖子

55

积分

注册会员

Rank: 2

积分
55
发表于 2016-9-3 20:15:19 | 显示全部楼层
学习了
回复

使用道具 举报

1

主题

104

帖子

279

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
279
QQ
发表于 2016-9-6 22:14:32 | 显示全部楼层
说真心话,win下配置环境,比MAC复杂很多
回复 支持 反对

使用道具 举报

0

主题

19

帖子

42

积分

新手上路

Rank: 1

积分
42
QQ
发表于 2016-9-25 21:58:47 | 显示全部楼层
我基本上每一步还要再百度一次
回复 支持 反对

使用道具 举报

0

主题

228

帖子

558

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
558
发表于 2017-10-11 13:33:09 | 显示全部楼层
感谢老哥,帮大忙了
回复 支持 反对

使用道具 举报

4

主题

1461

帖子

3024

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
3024
发表于 2017-12-15 14:03:05 | 显示全部楼层
回复回复回复回复
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-11-19 06:31 , Processed in 0.160148 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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