文档章节

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

叫我爷_好吗
 叫我爷_好吗
发布于 2016/03/02 11:33
字数 531
阅读 1431
收藏 1

目前我遇到出现在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
广州
程序员
私信 提问
已有Android项目集成RN

开篇一张图,后面全靠编 1.配置ReactNative的js环境 在Android项目根目录下输入命令npm init (直接在Android studio的terminal命令窗口就行) 我们可以看到init让你生成一个package.json文件,...

pjenary
07/19
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
ReactNative学习笔记(一)

一.ReactNative 环境搭建 1.参考指南 reactnative.cn/docs/0.48/getting-started.html#content ReactNative 中文网,集成步骤详细,按步骤一步步来,这里就不赘述了。 2.遇到的问题 如果你按...

朱敏_ITer
2017/09/10
0
0
大前端时代,我为什么支持前端程序员学习原生技术?

在上一篇文章中,我分析了大前端的趋势,我建议原生程序员拿出3分精力来学习大前端技术。本文将进一步分析这一趋势,并针对前端程序员(FE)给出一些建议。在此之前,先给大家介绍下大前端。...

singwhatiwanna
10/15
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

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

枣泥布丁
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小程序异步操作 跨js执行 在微信小程序里面实现跨页面通信

我们知道,在小程序里面一个页面的变化,是通过调用 setData 函数来实现的。所以想做到在二级页面里让一级页面产生变化,最 Quick And Dirty 的做法就是把一级页面的 this 传入到二级页面去,...

xiaogg
9分钟前
0
0
授于管理员登录其它用户

1.沙盒中,授予管理员登录 安全性控制==>登录访问权限政策

在山的那边
11分钟前
1
0
线程安全的CopyOnWriteArrayList介绍

证明CopyOnWriteArrayList是线程安全的 先写一段代码证明CopyOnWriteArrayList确实是线程安全的。 ReadThread.java import java.util.List; public class ReadThread implements Runnable {......

绝地逢生
13分钟前
0
0
Java重写的7个规则

几年前你可能会遇到这样一个面试题:“重写和重载的区别”、而现在随着科技的更迭、面试的问题越来越高级、面试官的问题也越来越深入、此文是上述面试题的一个延伸、让你从简单的重写规则中更...

architect刘源源
13分钟前
1
0
JavaScript异步编程:Generator与Async

从Promise开始,JavaScript就在引入新功能,来帮助更简单的方法来处理异步编程,帮助我们远离回调地狱。 Promise是下边要讲的Generator/yield与async/await的基础,希望你已经提前了解了它。...

前端攻城老湿
14分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部