之前一篇写了《逻辑性最强的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环境搭建扩展篇——安装后报错解决方案的更多相关文章

  1. NODEJS环境搭建 第一篇 安装和部署NODEJS

    一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 ...

  2. LNMP环境搭建:Nginx安装、测试与域名配置

    Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...

  3. windows 64位下,React-Native环境搭建详解 (Android)

    React-Native环境搭建需要: 1.安装Java JDK 2.安装Android Studio 3.安装node.js 4.安装git 5.安装Python 2.x (注意目前不支持Pytho ...

  4. LNMP环境搭建——MySQL篇

    The world's most popular open source database 1.Install MySQL root@kallen:~# apt-get install mysql-s ...

  5. LNMP环境搭建之php安装,wordpress博客搭建

    LNMP环境搭建之php安装,wordpress博客搭建 一.介绍: 1.什么是CGI CGI全称是"通用网关接口"(Common Gateway Interface),HTTP服 ...

  6. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  7. Python环境搭建和pycharm安装

    Python环境搭建和pycharm安装 本人安装环境为Windows10系统,下载的Python版本为3.4社区版本,可参考 1.下载Python3.4版本 官网:https://www.pytho ...

  8. Tesseract环境搭建及编译安装

    Tesseract环境搭建及编译安装 Tesseract源码都是C++源码:对于不咋会C++的人来说,这真是...虽然说语言有相通性,但是...哎!!!!! 分享出来,也希望对大家有所帮助. 环境:w ...

  9. 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/{ ...

随机推荐

  1. cocos2dx之WebView踩过的坑(android返回键处理问题)

    最近游戏接入了一个私服平台,由于没有sdk,所以支付相关的操作需要在网页端进行,也就是说点击充值需要在游戏内部弹出一个网页,并定位到平台充值的地址.查阅相关资料后决定使用cocos2dx自带的WebV ...

  2. Python学习之数据类型

    整数 Python可以处理任意大小的整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 用十六进制表示整数比较方便,十六进制用0x前缀和0-9,a-f表示,例如: ...

  3. C语言编译过程(转)

    内容摘要 : C语言编译的整个过程是非常复杂的,里面涉及到的编译器知识.硬件知识.工具链知识都是非常多的,深入了解整个编译过程对工程师理解应用程序的编写是有很大帮助的,希望大家可以多了解一些,在遇到问 ...

  4. 初学 Python(十二)——高阶函数

    初学 Python(十二)--高阶函数 初学 Python,主要整理一些学习到的知识点,这次是高阶函数. #-*- coding:utf-8 -*- ''''' 话说高阶函数: 能用函数作为参数的函数 ...

  5. 关于在HTML中使用的script标签

    本文是<JavaScript高级程序设计>(第三版)中的第二章的个人学习的总结. 在HTML中使用JavaScript <script>标签 在HTML5中script主要有以 ...

  6. 配置SSH隧道访问Ubuntu服务器上的MongoDB

    为了数据安全,在MongoDB的配置文件里,一般会把默认的27017端口port改为自定义的端口号,然后把允许访问的IP设为127.0.0.1(即主机本身).但是这样就会在开发的过程查看数据时带来麻烦 ...

  7. 办公楼[POI2007]

    题目描述 FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄,FGD决定将公司迁至一 ...

  8. 使用Travis CI自动部署Hexo博客

    自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了.但在不断的使用中发现每次的发布操作也挺耗时的. 我一般的操作是将平时整理好的md文件放到 ...

  9. vue学习笔记(1)—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  10. pentaho之kettle篇---kettle基本操作

    今天先来做一个简单的kettle的例子. 打开输入,选择CSV文件输入. 双击CSV文件输入图标,可以看见如下: 步骤名称:就是你这一步的名字,可以任意取,原则就是要明白,清楚这一步是做了什么操作. ...