ReactNative环境搭建扩展篇——安装后报错解决方案
之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装,今天在这里做一个复盘,让我们能够更直观更深入的了解React Native(以下简称RN),这一篇重点来说的就是,安装之后必报的2个错误的解决方案。
更新日期:2017.9.2 运行环境:Windows 10/Android环境
一、回顾一下RN的安装过程:
1.搭建Android开发环境,因为要运行在Android环境下,所有安卓的开发环境是要搭建的。具体的步骤请搜索度娘!(配置JDK、安装SDK Manager组件等);
2.ReactNative(下文简称RN)因为是基于nodejs框架的,所以需要安装nodejs开发环境,包括:nodejs运行库6.x+、npm3+、python2.x;
3.需要初始化RN项目所以需要安装Git版本控制器;
4.以上步骤执行完成之后,就可以创建RN项目了,创建并运行项目需要以下几个步骤:
a).创建项目,执行命令:react-native init xxx(项目名称);
b).在模拟器或手机安装app:进入项目根目录执行命令:react-native run-android;执行完此命令之后,如果是第一次运行,命令会帮你在手机或者模拟器创建一个app的“壳子”以后运行都是基于这个app的,手机上只要有这个app之后,在启动调试就不需要react-native run-android来运行安装项目了,因为“壳子”的安装只需要一次,以后只需要启动服务即可,RN调试app的时候是基于服务接口的,所以如果app已经安装在android调试设备上之后,每次重启电脑只需要输入命令:“react-native start”启动服务即可进行修改和调试。
二、处理第一次创建App之后一定要报的2个错:
错误一:unable to load script from assets index.android.bundle on windows.
翻译中文:无法在加载文件index.android.bundle
产生原因:ad项目在编译运行的时候,在win10上没有创建编译目录导致的。
解决方案:
.在工程目录冲创建assets文件
android/app/src/main/assets .根目录下运行命令
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res .重新安装app
react-native run-android
错误二:Could not connect to development server.
如图:
翻译中文:没有找到开发服务;
产生原因:安装的app没有设置服务器和端口号。
解决方案:
1.摇一摇,或者其他途经,弹窗RN设置浮层,如果用的是Visual Studio Emulator for Android上呼出设置浮层快捷键是:先按“ESC”再按“ALT”,设置浮层如图:
2.点击Dev Settings设置服务器ip和端口,如图:
默认的服务器端口是8081,使用http://localhost:8081/index.android.bundle?platform=android可以访问,即服务正常启动,启动的命令窗体不要关闭,关闭之后服务终止。
小技巧:使用快捷键可以很方便的调试刷新页面,如果使用的是Visual Studio Emulator for Android,连按两下“R”键,即刷新。
也可以在RN开发浮层上设置启动 Hot Reloading,每次文件修改都会自动刷新,大大节约了调试的时间!
解决了以上2个问题,第一次运行RN App的问题就已经全部解决了,祝使用愉快!
ReactNative环境搭建扩展篇——安装后报错解决方案的更多相关文章
- NODEJS环境搭建 第一篇 安装和部署NODEJS
一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 ...
- LNMP环境搭建:Nginx安装、测试与域名配置
Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...
- windows 64位下,React-Native环境搭建详解 (Android)
React-Native环境搭建需要: 1.安装Java JDK 2.安装Android Studio 3.安装node.js 4.安装git 5.安装Python 2.x (注意目前不支持Pytho ...
- LNMP环境搭建——MySQL篇
The world's most popular open source database 1.Install MySQL root@kallen:~# apt-get install mysql-s ...
- LNMP环境搭建之php安装,wordpress博客搭建
LNMP环境搭建之php安装,wordpress博客搭建 一.介绍: 1.什么是CGI CGI全称是"通用网关接口"(Common Gateway Interface),HTTP服 ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- Python环境搭建和pycharm安装
Python环境搭建和pycharm安装 本人安装环境为Windows10系统,下载的Python版本为3.4社区版本,可参考 1.下载Python3.4版本 官网:https://www.pytho ...
- Tesseract环境搭建及编译安装
Tesseract环境搭建及编译安装 Tesseract源码都是C++源码:对于不咋会C++的人来说,这真是...虽然说语言有相通性,但是...哎!!!!! 分享出来,也希望对大家有所帮助. 环境:w ...
- centos LNMP第一部分环境搭建 LAMP LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/php/{p.conf.default,p.conf} php运行方式SAPI介绍 第二十三节课
centos LNMP第一部分环境搭建 LAMP安装先后顺序 LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/local/php/{ ...
随机推荐
- ajax知识点总结
一.JSON JSON是JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数 ...
- jenkins - jsp或其他web样式无法展示
背景 因为jenkins安全性的问题,默认加载出来的报告是无css的,通过以下配置解决:HTML Publisher Plugin 插件在新的Jenkins版本中会导致打开的网页中无法加载CSS以及无 ...
- spring AOP原理
spring 实现AOP是依赖JDK动态代理和CGLIB代理实现的.以下是JDK动态代理和CGLIB代理简单介绍 JDK动态代理:其代理对象必须是某个接口的实现,它是通过在运行期间创建一个接口的 ...
- (转)在Linux里设置用户环境变量的方法
背景:在linux下,root用户安装完jdk后,非root用户不能使用java环境变量. 问题排查: 通过在root和非root用户下分别执行echo $PATH 可以观察环境变量的异同.然后将需要 ...
- Eclipse修改背景保护色及变量、方法的高亮
1.修改背景保护色 eclipse操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些. 设置方法如下: 1.打开 ...
- cookie原理
cookie原理 一般来说,Cookie通过HTTP Headers从服务器端返回到浏览器上.首先,服务器端在响应中利用Set-Cookie header来创建一个Cookie,然后,浏览器在它的请求 ...
- 转:MVC Html.AntiForgeryToken() 防止CSRF攻击
(一)MVC Html.AntiForgeryToken() 防止CSRF攻击 MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site requ ...
- centos7启动过程及systemd祥细说明
开机启过程 POST->BOOT SEQUENCE-> BOOTLOADER->KERNEL + INITRAMFS(INITRD)->ROOTFS->/sbin/ini ...
- JavaScript预处理
在预处理阶段js引擎会扫描代码中用var定义的变量和用声明的方式定义的函数 用声明方式定义函数 function a(){ alert('hello world'); } 用函数表达式定义函数 var ...
- Spring Boot中使用Swagger2构建API文档
程序员都很希望别人能写技术文档,自己却很不愿意写文档.因为接口数量繁多,并且充满业务细节,写文档需要花大量的时间去处理格式排版,代码修改后还需要同步修改文档,经常因为项目时间紧等原因导致文档滞后于代码 ...