Windows版本搭建安装React Native环境配置

来源:互联网 发布:寺库网是正品吗 知乎 编辑:程序博客网 时间:2024/05/16 10:17

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 出现下图内容
 

 

第二步安装android环境
  1. http://tools.android-studio.org/index.php/sdk
  2. 下载后安装installer_r24.3.4-windows.exe,安装成功后出现下图界面,选择SDK Manager打开
  3.  安装下列package,都必须安装,如果如果网站被墙可以设置镜像网站
  4. 特别提示 Intel x86 Emulator HAXM INSTALL需要自行安装,并在BIOS开启支持 Intel  Virtualization   Technology
  5. 如果下载缓慢可以设置镜像
 
 
 
  • 启动 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
 
2. PATH增加如下内容
%ANDROID_HOME%;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
 
 
测试是否配置成功,打开命令行输入 android 和 adb 分别测试一下
 
 
必须测试成功,后面才能正确编译项目
 
第四步其他环境配置
 
建议安装上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的文件
 
在命令行中进入项目目录,输入react-native start,等待一段时间:
 
 
 
部分人错误需要删除下面的文件(自行备份)
D:\Program Files\reactnative\MyProject\node_modules\react-deep-force-update\.babelrc
 
 这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android
 
 
如果出现上面的脚本内容表示服务器端已经可以了。
第六步:如果出现编译安装不成功请先配置“ANDROID_HOME”sdk环境变量。
0 0
原创粉丝点击