ReactNative环境搭建扩展篇——安装后报错解决方案-低调大师

ReactNative环境搭建扩展篇——安装后报错解决方案

2017-09-01 639

之前一篇写了《逻辑性最强的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的问题就已经全部解决了，祝使用愉快！

如果本文对你有所帮助，请打赏——1元就足够感动我：）

联系邮箱：intdb@qq.com
我的GitHub： https://github.com/vipstone

关注公众号：

作者：王磊
出处： http://vipstone.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，请标明出处。

微信关注我们

原文链接：https://yq.aliyun.com/articles/629917

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)

ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分： 1.在微信开放平台创建应用获得wechatappid; 2.在腾讯开放平台创建应用获得QQ_APP_ID； 3.安装QQ分享插件cordova-plugin-qqsdk; 4.安装微信分享cordova-plugin-wechat； 5.ionic3分享功能的实现；准备工作微信开放平台开发者账号腾讯开放平台开发者账号 1.在微信开放平台创建应用获得wechatappid 微信开放平台官方地址:https://open.weixin.qq.com/，创建步骤按照官方一步一步来就行了，需要注意的是android包名和iOS的Bundle Id需要与config.xml中的widget节点的id属性一致，这里使用的是cn.tongedev.dress。创建成功之后需要等1-2天审核。 <widget id="cn.tongedev.dress" version="0.0.1" > 2.在腾讯开放平台创建应用获得QQ_APP_ID；腾讯开放...

2017-09-01

567

一、背景因为代码都迁移到了Gitlab，所以Jenkins编译的时候我们都需要将之前的SVN信息换成现在的Git信息。最近编译一个Lib库的时候，因为团队规定上传Release版本的AAR到Maven的话，必须需要在Jenkins上编译而且Git Branch 必须是master分支才能够上传到Maven。因此我们就需要在Gradle脚本中，获取Git Branch ,Git Commit等相关信息。但是在获取Git Branch的时候出现了问题，在本地Android Studio编译的时候能够获取到Git Branch的名字，但是使用Jenkins编译的时候，一直获取不到信息。下面是我写的一份gradle文件，用于获取Git和Jenkins的相关信息 /** * 获取Git 分支名 */ def getGitBranch() { return 'git symbolic-ref --short -q HEAD'.execute().text.trim() } /** * 获取Git 版本号 */ def getGitSHA() { return 'git rev-parse -...

2017-09-02

820

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。