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上没有创建编译目录导致的。

解决方案:

1.在工程目录冲创建assets文件
android/app/src/main/assets

2.根目录下运行命令
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

3.重新安装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的问题就已经全部解决了,祝使用愉快!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

LR常见问题整理

  当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到不能打开浏览器的情况,可以用下面的方法来解决。

51140
来自专栏源哥的专栏

在struts中使用国际化(i18n)

在struts中使用国际化(i18n)     i18n可以满足对系统的国际化,它的原理就是将页面上的所有标志都放到一个消息资源文件中,不同的语言要提供不同的消...

7820
来自专栏超然的博客

web攻击

  最常见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。当浏览者看到此网页时,特定的脚本就会以浏览者用户的身份和权限来执行。通过XSS可...

14610
来自专栏java 成神之路

pidstat 命令详解

53460
来自专栏嵌入式程序猿

快速学会web Server的裁剪移植

前几次给大家讲过freeRTOS的移植,不管是在我们移植好的,还是KSDK移植好的BSP里都有server的演示程序,KSDK里面使用lwip开源TCP/IP协...

31160
来自专栏开源优测

分享 | 使用Grafana实现 Jmeter实时监控

作者博客: http://www.jianshu.com/u/be71e0f7ca59

22610
来自专栏java学习

Java程序员必备的11大Intellij插件

链接:https://www.jianshu.com/p/686ba0ae4ac2

12510
来自专栏菩提树下的杨过

pycharm如何设置python版本、设置国内pip镜像、添加第三方类库

直接上图(mac环境): 一、设置项目的python版本 File->Default Settings ... ? 在弹出的界面上(参考下图),左上角的下拉框里...

61270
来自专栏建站达人秀

如何快速搭建 hexo 博客

本文将简介如何自己的服务器、腾讯云COS及Github Page上部署hexo博客。

1K50
来自专栏向治洪

github pages + Hexo + 域名绑定搭建个人博客

环境 Windows 10(64 位) Git-2.7.4-64-bit  node-v4.4.7-x64 如果上述软件已经安装的,跳过,没有安装的下载安...

1K100

扫码关注云+社区

领取腾讯云代金券