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.

如图:2

翻译中文:没有找到开发服务;

产生原因:安装的app没有设置服务器和端口号。

解决方案:

1.摇一摇,或者其他途经,弹窗RN设置浮层,如果用的是Visual Studio Emulator for Android上呼出设置浮层快捷键是:先按“ESC”再按“ALT”,设置浮层如图:

2-1

2.点击Dev Settings设置服务器ip和端口,如图:

2-2

默认的服务器端口是8081,使用http://localhost:8081/index.android.bundle?platform=android可以访问,即服务正常启动,启动的命令窗体不要关闭,关闭之后服务终止。

小技巧:使用快捷键可以很方便的调试刷新页面,如果使用的是Visual Studio Emulator for Android,连按两下“R”键,即刷新。

也可以在RN开发浮层上设置启动 Hot Reloading,每次文件修改都会自动刷新,大大节约了调试的时间!

解决了以上2个问题,第一次运行RN App的问题就已经全部解决了,祝使用愉快!

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow实战——深度学习训练个性化推荐系统

请安装TensorFlow1.0,Python3.5 项目地址:GitHub - xiaobingchan/movie_recommender: MovieLens based recommender system.使用MovieLens数据集训练的电影推荐系统。 前言 本项目使用文本卷积神经网络,并使用MovieLens数据集完成电影推荐的…

Ubuntu开发环境配置--- 安装chrome浏览器

Ubuntu开发环境配置--- 安装chrome浏览器 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/idomyway/article/details/81986062 前言 Ubantu中自带了…

java中的匿名内部类总结

匿名内部类也就是没有名字的内部类正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口实例1:不使用匿名内部类来实现抽象方法12345678910111213141516abstrac…

Xamarin使用ListView开启分组视图Cell数据展示bug处理

问题描述 Xamarin使用IsGroupingEnabled"true"之后再Cell操作就会出现数据展示bug,数据不刷新的问题,如下图所示: 点击取消的是其他钢厂,但ViewCell展示的一直是“长峰”,这就分组试图一个比较常见的bug。 …

YOLOv3实现鱼类目标检测

YOLOv3实现鱼类目标检测 我将以一个项目实例,记录如何用YOLOv3训练自己的数据集。 在开始之前,首先了解一下YOLO系列代表性的DarkNet网络。 如下图所示,是YOLOv3中使用的DarkNet-53的结构,几种核心结构是: DBL: 是…

Xamarin截取/删除emoji表情bug解决方案

大家都知道,一个英文1字节,一个汉字2字节,而一个emoji表情4个字节,在有这三种混用的时候,比如app聊天界面,那么删除和截取便成了很头痛的事情。 问题描述 截取导致乱码,如下图: 解…

Web前端开发工程师必读de设计博客

2019独角兽企业重金招聘Python工程师标准>>> Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处。本文向Web前端…

Qt QtCreator 所有版本官方下载地址

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/xiezhongyuan07/article/details/79246556 直接跳过输入账号,选择所需版本。废话不多说&…

Tensorflow 神经网络作业手写数字识别 训练、回测准确率

大白话讲解卷积神经网络工作原理,推荐一个bilibili的讲卷积神经网络的视频,up主从youtube搬运过来,用中文讲了一遍。 这篇文章是 TensorFlow 2.0 Tutorial 入门教程的第五篇文章,介绍如何使用卷积神经网络(Convolutio…

React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)

React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示源码注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法。 本文分文三个部分:一、效果…

open×××+Mysql+PAM构建强大的***系统

openMysqlPAM构建强大的***系统本次为新的生产环境部署系统而采用了这个方案,陆续会将实际的生产架构整理出来.由于涉及到公司的各种敏感信息,已经将IP做了替换中途可能有出入 敬请谅解。等我找时间画图出来一并奉上。如果有根本上的问题,请大…

Linux 下 Qt 5.12无法切换中文输入法

无法切换中文输入的原因是当前下载的QtCreator中没有适配当前输入法框架(ibus、fcitx)的动态库 解决方法: 一、安装对应的输入法插件 1、如果是fcitx: ubuntu18.04:sudo apt-get install libfcitx-qt5-dev 拷贝系统路…

微信中通过页面(H5)直接打开本地app的解决方案

简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安装就直接打开&am…

GIMP 基本教程

本文主要记录笔者使用GIMP的心得,有些具体操作内容会省略,读者可以酌情阅读,内容较多,建议通过右边目录查看。 GIMP 是高级图片编辑器。 您可以使用它来编辑,增强和修饰照片 和扫描,创建工程图以及制作自己的图像。 它具有大量的专…

iOS通用链接(Universal Links)突然点击无效的解决方案

接上文《微信中通过页面(H5)直接打开本地app的解决方案》已经把iOS搞定并且已经正常能跑了,突然就再也用不了了... 问题描述 测试告诉我,如果从微信打开App之后,点击App右上角的应用网址之后,iOS通用链接就费了,在也…

如何利用shell脚本和client-go实现自己的k8s调度器

调度器介绍 scheduler 是k8s master的一部分,作为插件存在于k8s生态体系。 自定义调度器方式 添加功能重新编译实现自己的调度器(multi-scheduler)scheduler调用扩展程序实现最终调度(Kubernetes scheduler extender&#xff09…

Linux ubuntu安装搜狗输入法

1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/,如下图,要选择与自己系统位数一致的安装包, 我的系统是 64 位,所以我下载 64 位的安装包 sogoupinyin_2.2.0.0108_amd64.deb 安装方法: 1.打开命令终端,输入: sudo apt-get install xxx.deb 路径 2.重启电…

React Native顶|底部导航使用小技巧

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。 好在有人提供了更好的导航…

Linux QT5.12 一种整体界面字体设置的方法及设置PlainTextEdit组件的字体大小方法

1.在Linux QT5.12开发界面时,经常会涉及到界面字体大小的设置,默认字体一般比较小,解决方法如下: 在main函数中添加代码: // // 一种整体界面字体设置的方法: QFont font a.font(); font.setPointSize(14); a.setFont(font); // 2.在L…

Win7电脑,无法把文件保存到桌面上?

今天有用户反映重装了Win7后&#xff0c;文件无法另存到桌面上&#xff0c;解决方法如下&#xff1a;1、在任何地方打开资源管理器&#xff0c;按<Alt><F>键打开资源管理器的菜单&#xff1b;2、选择“工具”的“文件夹选项”&#xff0c;在“导航窗格”里选上“显…