首页 技术 正文
技术 2022年11月11日
0 收藏 791 点赞 3,794 浏览 2769 个字

史上最全Windows版本搭建安装React Native环境配置

配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的搭建好环境本站推出搭建教程.

安装学习遇到任何问题可以加入 ReactNative高级交流群 127482131 或访问博客网站 http://www.reactnative.pw/

第一步安装JAVA JDK

  1. 下载对应你电脑系统版本的 1.8 32位或64位SDK。
  2. 下载网站http://jdk.android-studio.org/
  3. 安装完成后测试path环境 cmd命令行输入java 出现下图内容

 

史上最全Windows版本搭建安装React Native环境配置

第二步安装android环境

  1. http://tools.android-studio.org/index.php/sdk
  2. 下载后安装installer_r24.3.4-windows.exe,安装成功后出现下图界面,选择SDK Manager打开史上最全Windows版本搭建安装React Native环境配置
  3. 安装下列package,都必须安装,如果如果网站被墙可以设置镜像网站
    史上最全Windows版本搭建安装React Native环境配置
  4. 特别提示 Intel x86 Emulator HAXM INSTALL需要自行安装,并在BIOS开启支持 Intel  Virtualization   Technology
  5. 如果下载缓慢可以设置镜像

 史上最全Windows版本搭建安装React Native环境配置  

  • 启动 Android SDK Manager ,打开主界面,依次选择「Tools」、「Options…」,弹出『Android SDK Manager – Settings』窗口;
  • 在『Android SDK Manager – Settings』窗口中,在「HTTP Proxy Server」和「HTTP Proxy Port」输入框内填入 mirrors.neusoft.edu.cn 和 80,并且选中「Force https://… sources to be fetched using http://…」复选框。设置完成后单击「Close」按钮关闭『Android SDK Manager – Settings』窗口返回到主界面;
  • 依次选择「Packages」、「Reload」。 

第三步android环境设置   1.找到我的计算机-属性-高级系统设置-高级-环境变量   新增ANDROID_HOMN 值现象你安装的skd目录 比如:D:\Program Files (x86)\Android\android-sdk史上最全Windows版本搭建安装React Native环境配置 2. PATH增加如下内容%ANDROID_HOME%;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;  测试是否配置成功,打开命令行输入 android 和 adb 分别测试一下 史上最全Windows版本搭建安装React Native环境配置 必须测试成功,后面才能正确编译项目 第四步其他环境配置 建议安装上Python 2.7,有些可能不装也没事 下载地址  https://www.python.org/downloads/ 安装git 安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端 下载地址:https://git-for-windows.github.io/  第五步 RN环境设置和搭建

  1. 下载稳定版 nodejs v5.7.0 Stable
    下载网站 https://nodejs.org/en/
  2. 安装后命令行输入npm测试是否成功

 译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist

 npm install -g react-native-cli安装好之后,可以命令行下就有react-native命令了

创建RN项目

命令行进入你希望创建项目的目录输入 

react-native init AwesomeProject

可能会很慢,等等就好,大概200多M的文件 史上最全Windows版本搭建安装React Native环境配置在命令行中进入项目目录,输入react-native start,等待一段时间:  史上最全Windows版本搭建安装React Native环境配置 部分人错误需要删除下面的文件(自行备份)D:\Program Files\reactnative\MyProject\node_modules\react-deep-force-update\.babelrc  这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android 史上最全Windows版本搭建安装React Native环境配置 如果出现上面的脚本内容表示服务器端已经可以了。  第六步 配置安卓模拟器  史上最全Windows版本搭建安装React Native环境配置史上最全Windows版本搭建安装React Native环境配置 注意要点内存设置515 开启GPU配置好后启动模拟器,如果不会可以使用genymotion,  建议使用genymotion模拟器比谷歌的模拟器好用安装genymotion-2.6.0-vbox 可能要去官网注册一个账号官网下载https://www.genymotion.com/下载网盘http://pan.baidu.com/s/1bnTnXs7 安装后需要配置下,这里坑了我好久,run-android找不到设备就需要设置这个史上最全Windows版本搭建安装React Native环境配置 genymotion不能联网配置问题,网上找了很多教程都不能用,后来自行研究如下解决方案  本地连接-属性-共享-设置如下 史上最全Windows版本搭建安装React Native环境配置 查看共享IP后面设置会用到 史上最全Windows版本搭建安装React Native环境配置 修改Oracle VM VirtualBox配置网卡1 史上最全Windows版本搭建安装React Native环境配置 网卡2配置  史上最全Windows版本搭建安装React Native环境配置配置IP管理 全局设置双击 VirtualBox Host-onley Ethernet Adapter  史上最全Windows版本搭建安装React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 史上最全Windows版本搭建安装React Native环境配置最后一步,也是最重要一步开启模拟器 wifi, 否则后面项目报错。史上最全Windows版本搭建安装React Native环境配置显示无网络,但是实际可用连接网络测试服务端口 ip为你本机IP ipconfig查看本地连接 ipv4地址 史上最全Windows版本搭建安装React Native环境配置  第七步 编译代码打包到模拟器 cd 到项目文件目录使用 react-native run-android  史上最全Windows版本搭建安装React Native环境配置 等待运行(如果是第一次运行,首先会下载gradle,时间较长)  成功界面如图 史上最全Windows版本搭建安装React Native环境配置 第一次运行会出现, 史上最全Windows版本搭建安装React Native环境配置 这时候我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口  史上最全Windows版本搭建安装React Native环境配置史上最全Windows版本搭建安装React Native环境配置 这里的IP是你本地电脑的ipv4 IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081史上最全Windows版本搭建安装React Native环境配置 设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native! 史上最全Windows版本搭建安装React Native环境配置  ReactNative环境搭建超详细视频教程  完成啦如果你安装学习遇到任何问题可以加入 ReactNative高级交流群 127482131 或访问博客网站

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,893
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,422
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,240
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,054
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,683
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,720