文档章节

ReactNative 踩坑(1)环境搭建 Unable to download JS bundle

叫我爷_好吗
 叫我爷_好吗
发布于 2016/03/02 11:33
字数 531
阅读 956
收藏 1
点赞 1
评论 0

目前我遇到出现在Unable to download JS bundle   的情况有两种

  1. 在android真机测试时 app 出现server 访问错误,在因为在测试模式中app需要访问开发机上的server服务进行加载js文件


             解决方法:如果是android 5.0设备 可以使用USB方式访问,在测试手机与开发机用USB线连接时 运行以下命令然后在app界中摇晃手机或按菜单键,在开发菜单中选择 Dev Setting  ->  Debug server host & port for device  然后填上 127.0.0.1:8081

    $ adb reverse tcp:8081 tcp:8081


             如果是 5.0以下设备请将开发机与测试手连接到同一网络,然后在app界中摇晃手机或按菜单键,在开发菜单中选择 Dev Setting  ->  Debug server host & port for device  然后把你的开发机IP地址和server 端口填上 端口默认是8081(例:192.168.1.100:8081)


  2. 一般情况在开发机中访问 localhost:8081/index.android.bundle?platform=android 会打印出你要加载的JS代码          
    但现在他会显示出跟下面类似的错误代码
             {"message":"TransformError: /Users/Zachary/Desktop/Android Work/Recat/MyProject/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/Zachary/Desktop/Android Work/Recat/MyProject/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/Zachary/Desktop/Android Work/Recat/MyProject/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage","type":"TransformError","errors":[{}]}                    

                这个情况在app中我见过有两中不同的错误显示方式。。           

                第一个就是显示Unable to download JS bundle

                第二个显示为 The development server returned response error code:500    

                  

                无疑第二个才是这个错误最正确的打开方式,但我不明白为什么会有显示第一种的情况                     

      为什么会出现这种错误呢?          
      原因是:在新版本在升级了使用 Bable6 ,可以有些依赖的库不是使用这个版本所以会出现这个错误。所以要把这个 bable 删除,升级依赖          

                1,先删除依赖包:
                   rm -rf node_modules
                   npm install
                2,修改package.json文件
                   "scripts": {
                   "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f","postinstall": "npm run clean:babelrc"

                    }

© 著作权归作者所有

共有 人打赏支持
叫我爷_好吗
粉丝 7
博文 1
码字总数 531
作品 1
广州
程序员
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
07/12
0
0
学习RN之前看这一篇React入门就够了

React是一个用于构建用户界面的 JavaScript 库,起源于Facebook内部项目,13年已经开源https://github.com/facebook/react。学习ReactNative首先要了解React相关的知识(当然可以和RN同步学习...

LvesLi
06/29
0
0
手把手教你React Native实战从 React到Rn《二》

了解相关更多技术,可参考《学习React Native必看的几个开源项目》,接下来 我们来聊一聊相关的React。 React简介 Rn是基于React的设计,了解 React有助于我们开发RN应用,React希望将功能分...

codeGoogle
06/01
0
0
JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事Java、Android、iOS、C++、Swift、Objective-C以及跨...

androidguy
06/29
0
0
Swift已有项目手动集成ReactNative

背景 记得2017年处写过一篇公司放弃RN血泪史的经历,当时之所以放弃时因为前期投入过多人力物力研究,以至于第一版本耗时太多未见成效,所有被老板叫停。真是"常在河边走哪有不湿鞋"最近因为...

LvesLi
06/27
0
0
React Native与原生关系理解与对比

00关系理解 这个是我对和原生关系的理解。简单解释下这个图。 编写完业务代码后,通过命令,将代码分别编译成一个和文件,当然还是资源文件。然后放到、的原生工程里,通过黄色说明块里的示例...

Sunny玄子
2017/10/19
0
3
React Native Android 源码分析之启动过程

前言 这篇开始将分析 React Native 是在 Android 端的启动过程是怎么样。 用过 React Native 的小伙伴都知道,React Native 是可以使用 JS 来编写一份代码,并可以同时跑在 Android 和 iOS ...

骑摩托马斯
07/09
0
0
React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao
05/18
0
0
利用TypeScript构建优雅的React Native项目

很长一段时间就想把ts引入公司的项目,但总是因为一些原因被搁置。接下来有机会重构之前的rn项目,借此机会正好可以引入ts,为了使后期的项目架构更加完善,近期我会梳理rn的一些知识点和新特...

百叶
07/11
0
0
从Android到React Native开发(四、打包流程解析和发布为Maven库)

1、从Android到React Native开发(一、入门) 2、从Android到React Native开发(二、通信与模块实现) 3、从Android到React Native开发(三、自定义原生控件支持)  作为失踪人口,本篇是对...

恋猫月亮
06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
30分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
41分钟前
1
0
将博客搬至CSDN

AHUSKY
52分钟前
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
今天
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部