React Native是使用JavaScript和React编写原生移动应用

我的开发平台是基于windows系统,所以只支持android,要是想开发ios系统,那就只能考虑使用沙盒环境

接下来就是必须安装它的依赖

注意 :Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)

https://reactnative.cn/docs/getting-started/

官方文档其实写的就很详细了,我就不复述了,直接说我遇到的坑,也许是我涉世未深,很多东西想的不是太到位而遇到的一些小问题

首先就是翻墙的问题,一定要有非常稳定非常稳定非常稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常翻墙。

我的翻墙工具就是一个谷歌浏览器的插件,当时还很自信的把as下载下来,在安装的时候就超时了我以为是网络不好,重新安装了好几遍,后来我就仔细的看了一下报错,刚好我老大过来问我怎么样的时候,我跟他描述了一下,他给我一个翻墙的工具,这个坑就算过去了

给node设置npm镜像 https://www.cnblogs.com/CCxi/p/9835403.html

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

需要配置android_name环境变量,

SDK 默认是安装在下面的目录:

C:\Users\你的用户名\AppData\Local\Android|Sdk

先添加一个环境变量,如下图:

在classpath变量值后面追加上  ;%ANDROID_HOME%\platform-tools\;

打开cmd命令输入adb,查看是否配置成功

下载React-native 的命令行工具(react-native-cli):npm install -g yarn react-native-cli

创建新项目:react-native init AwesomeProject

需要安装Android Virtual Device(简称 AVD)还有很多第三方的模拟器,但是大部分需要收费,或者使用android真机

这里我也遇到了一个坑,搞了好半天,就是在SDK Manager里面 如下图:

下载HAXM,当时我的已经是下载好的了,但是在创建AVD的时候就提示报错说没有硬件加速之类的bug,反复的检查也没找到原因,上图一直显示下载了

然后我就去HAXM官网下载了一个windows版的硬件加速引擎,安装一下就好了,双击下图intelhaxm-android.exe文件

我的avd就可以启动了,当时还有点小小的兴奋,终于把虚拟机跑出来,

然后就是编译并且运行React-Native

cd AwesomeProject

react-native run-android

如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。

注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。

此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。

as项目文件名不要随意的去更改,否则就要重新down代码啦,o(╥﹏╥)o

React Native搭建开发环境 之 --走过的坑的更多相关文章

  1. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  2. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...

  3. React Native 搭建开发环境

    1.先安装node.js,https://nodejs.org/en/download/ 然后,双击下载好的.msi文件安装即可,安装完成后,打开终端,输出npm -v 即可查看我们刚才安装的node ...

  4. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  5. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  6. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  7. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

  8. 一步一步在Windows下搭建React Native Android开发环境

    搭建JAVA开发环境 依据操作系统分为x86或x64位的.下载jdk1.8以上的版本号. 本机安装时的java版本号:jdk-8u45-windows-x64.exe 配置JAVA的环境变量 JAVA ...

  9. 配置React Native 安卓开发环境

    配置主要分为以下几步: 安装node.js 安装AndroidStudio 安装React Native命令行工具 搭建React Native版本的Hello World,修改代码查看效果 第一步 ...

随机推荐

  1. Django ---- 框架简介

    MVC框架和MTV框架 mvc,全名是 Model View Controller, 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Cont ...

  2. vscode添加prettier格式化自动加分号问题

    在vscode的settings.json中添加: "prettier.singleQuote": true, "prettier.semi": false, ...

  3. IDEA创建完整目录maven项目

    鉴于第三次利用idea建立完整目录maven项目时仍要反反复复地问度娘,特此记录 1.第一步,进行project-> 勾选Create from archetype,搜索maven.archet ...

  4. 实践笔记_J2EE_Server_Tomcat_tomcat域名绑定_1_单域名绑定

                                                                      Tomcat域名绑定(1)单域名绑定 1. 测试环境说明 名称 版本 ...

  5. github徽标引入

    官网: https://shields.io/ 示例: ![](https://img.shields.io/badge/language-go-cccfff.svg?style=popout-squ ...

  6. jq判断是PC还是手机端的方法

    $(function(){ //判断是否是手机 var mobile_flag = isMobile(); if(mobile_flag){ $('.now_qq').attr('href',&quo ...

  7. n2n windows 编译安装文件

    n2n安装 n2n原理编译版下载,可直接使用:windows下vpn客户端 n2n_v2_linux_x64 n2n_v2_Win32TAP网卡驱动 #linux环境编译yum install -y ...

  8. js中ASCII码和字符互相转换的方法

    目录 十进制ASCII码转换成字符 字符转换成十进制ASCII码 十进制ASCII码转换成字符 使用String.fromCodePoint(num1[, ...[, numN]])方法 String ...

  9. 在Net MVC中应用JsTree

    先实现个基本用法 1 - 引入js和css 2 -  html <div id="list_left" class="col-md-2 pre-scrollable ...

  10. js实现放大效果

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>放 ...