React-Native 错误记录

简介: 1.使用require产生的路径错误这个应该是属于文件路径错误导致的。当我使用require('image!pintu')语句,就会出现这个错误。或者在index.android.js以外的文件内使用require("./data/moviedata.json")也会出现这个错误,然后http://localhost:8081/index.android.bundle?platform=android 这个网址也会报错。

1.使用require产生的路径错误

这个应该是属于文件路径错误导致的。

当我使用require('image!pintu')语句,就会出现这个错误。

或者在index.android.js以外的文件内使用require("./data/moviedata.json")也会出现这个错误,

然后http://localhost:8081/index.android.bundle?platform=android 这个网址也会报错。

第一种情况可能是从0.14版本开始引用静态图片等方式改变了,不再使用require('image!logo')的方式

第二种情况,只要将路径改为require("../data/moviedata.json")即可(没错,就多了一个".").

img_3cdd0c1da89b9f1c14371dc0fb1e47c6.png


img_419b23acb5c96c01796fbcaba73cded6.png
http://localhost:8081/index.android.bundle?platform=android报错

2.Cannot call a class as a function

img_0c720dbd52527aefdb58948a34c83ce3.png
错误图片

这个大多因为写错、写漏单词引起的,有点麻烦。我就简述一下我的情况:

img_565bbfbddd7855d9004bf6fb95ca6d51.png

我是由于写漏一个"new"导致的错误。

img_bc10e76036954c4f77ab93f5cd1d8a5d.png

3.StaticRenderer.render():A valid React element(or null)...

img_698a0af8889a5ad5a65a9bb4eeefac4c.png

出现这种是因为:该写return的函数没有写return.

img_d8f33c29a146a671d2e904d38fd0efa7.png
该有return却没写return

写上return后问题就消失了。

img_07fa6e7e47e5f721026a6ededa550cf9.png
写上return之后

4.Navigator is deprecated and has been removed from this package.

img_29608d571930cad8977e80c157567c46.png

具体意思是,Navigator组件已经从react-native这个包中移除了,现在要通过安装并导入react-native-deprecated-custom-components这个包来使用Navigator。具体步骤如下:

1.找到项目根目录,在控制台输入:

npm i react-native-deprecated-custom-components –save

img_0ce45aeae5d80bd27549c8f8c3852078.png

(ps.我在项目根目录直接会失败,然后我在上级目录(ReactDemo)先安装一次,再进入根目录(AwesomeProject)安装,这下才成功。原因我不晓得。)

2.在导入react-native-deprecated-custom-components

通过:importNavigatorfrom'react-native-deprecated-custom-components';


img_1c65232f4b393168a239e3c969c22a44.png

3.将之前的Navigator改为Navigator.Navigator

img_0b1764e101c664fb768cbc353641c59f.png
img_51bf0b7fdfe483263a3572c7720eeca4.png

5.com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException

当时我更改了电脑的密钥,把我的win10家庭版升级到了win10专业版(期间来来回回更改了很多设置),

然后我将项目运行到模拟器上时,出现了这个错误。

我查了一下网上的资料,可能是gradle文件出错。我回想了一下,当初我曾更改过两个文件的代码(如下两行)

classpath 'com.android.tools.build:gradle:1.2.3' (build.gradle中改动过的代码)

distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip (gradle-wrapper.properties中改动过的代码)

随后我新建了一个工程,把这两行代码改成新工厂的一样,就可以正常运行了(具体操作如下)

解决:在工程的android文件夹下找到build.gradle和gradle-wrapper.properties文件(如下图,app文件夹是我自己创建的)

img_ca198e7e33e70e5cec68433e37ebe5d5.png

然后将build.gradle的classpath改为:com.android.tools.build:gradle:2.2.3

img_531da359b8c629a8a3160bec3d31abb9.png
build.gradle文件

将gradle-wrapper.properties的distributionUrl改为:https\://services.gradle.org/distributions/gradle-2.14.1-all.zip


img_12515d243da44bfd23e0d22df016650a.png
gradle-wrapper.properties文件

不过这么做,可能会无法在国产手机上运行。

暂时没找到完美的解决办法

6.java.io.IOException: Could not delete path'D:\Work\ReactDemo \AwesomeProject\android\app\build\XXXXXXXXXXXXX


img_192744e0c10f40263ef741d2ef75fee4.png

手动删除android\app\build下的内容,在重新运行就好了。

目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
3月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
4月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
53 0
|
3月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
3月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
4月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
4月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
60 1
|
4月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
58 3
|
4月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
44 0