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

时间: 2024-10-07 17:15:21

ReactNative环境搭建扩展篇——安装后报错解决方案的相关文章

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

一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 进入dos,输入node -v 出现版本号 输入npm -v 出现版本号 如下图 四.配置npm的全局模块的存放路径以及cache的路径 我是把全局模块放在E盘,这个路径可以自己设置 npm config set prefix "E:\nodejs\node_global"npm conf

reactNative环境搭建+打包+部分报错总结

个人搭建记录+个人收集: 多些真诚,少些坑. 排版书写过程可能不够详细,还望见谅. 详细见:http://files.cnblogs.com/files/chunlei36/reactNative%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%26%E6%89%93%E5%8C%85%26%E6%8A%A5%E9%94%99%E6%80%BB%E7%BB%93.pdf reactNative环境搭建+打包+部分报错总结

LNMP环境搭建 Ubuntu篇

LNMP    就是linux+nginx+mysql+php.  洒家之前一直用apache服务器,还是win7系统,使用的都是xampp,esayphp,wamp等集成环境,周末闲着无聊,抱着尽量提高b格的想法动手配置了一下环境.完成之后还有点小激动.把过程分享出来,希望能帮助一些和我差不多的小白.下面开始环境配置: 首先ctrl+alt+t打开终端 1.更新软件源:  sudo apt-get update2.安装nginx  sudo apt-get install nginx3.启动n

LNMP环境搭建——MySQL篇

The world's most popular open source database 1.Install MySQL root@kallen:~# apt-get install mysql-server-5.5 mysql-client-5.5 2.Add Users (1) 选择数据表 语句例如以下:use mysql; (2) 在mysql的user表中添加连接用户帐号: 这里不要直接使用INSERT语句加入user记录,使用INSERT可能出现错误: ERROR 1364 (HY0

Golang开发环境搭建-Vim篇

Golang开发环境搭建-Vim篇 转自:http://tonybai.com/2014/11/07/golang-development-environment-for-vim/ 虽说sublimetext3+gosublime+gocode是目前较为 流行的Golang开发环境组合,但作为一名VIMer,没有一套得心应手的Vim for Golang dev心里总是过不去的.Golang虽然年轻,但即便是从Go 1版本发布(2012年3月28日)算起,掐指算来也有小三年了.全世界的开发者已经

LNMP环境搭建——Apache篇

1.Apache DSO(Dynamic Shared Object) (1) 查看已编译模块: [root@kallen ~]# httpd -M Loaded Modules: core_module (static) mpm_prefork_module (static) http_module (static) so_module (static) auth_basic_module (shared) auth_digest_module (shared) authn_file_modu

[LAMP环境搭建三]PHP安装

****说明:先全部看一遍,再开始安装**** 获取PHP源码包 http://cn2.php.net/get/php-5.5.10.tar.gz/from/this/mirrorwget 安装libxml2:wget ftp://xmlsoft.org/libxml2/libxml2-2.9.1.tar.gz./configure --prefix=/usr/local/libxml2# yum -y install python-devel 安装zlib:wget http://zlib.n

[LAMP环境搭建二]MySQL安装

安装前准备工作:[[email protected] src]# yum -y install bison bison-devel ncurses ncurses-devel openssl openssl-devel cmake下载安装http://www.cmake.org/files/v2.8/cmake-2.8.12.2.tar.gz wgettar -zxvfcd./bootstrapgmakegmake install/********************************

[LAMP环境搭建一]Apache安装

vi /etc/sysconfig/network-scripts/ifcfg-eth0加入 ONBOOT=yes //启动时网络接口是否有效这样就可以自动连接网络了 /********************删除自带的apache:service httpd stopyum remove httpd/********************安装前准备:yum -y install gcc gcc-c++ libtool /*******************下载:apache源码包 注意是h