React Native错误汇总(持续更新)

简介: 错误1 Element type is invalid…:错误描述: Element type is invalid: expected a String(for built-in components) or a class/function(for composite components) but got:object. check the render meth

错误1 Element type is invalid…:

错误描述:
Element type is invalid: expected a String(for built-in components) or a class/function(for composite components) but got:object. check the render method of ‘….’

这里写图片描述
这个错误是很不容易发现的原因是由于ES5语法和ES6语法混乱搭配导致的。

ES5 语法 导出模块

module.exports = Page2;

ES5语法 引入模块

var NaviBar = require('./NaviBar');

ES6 导出语法

export  default class Page2 extends Component {

ES6 语法 导入模块

import NaviBar from './NaviBar';

两种语法混乱使用, 比如用ES6 导出 用ES5导入, 就可能会产生上述错误

错误2

错误描述:
cannot call a class as a function

这里写图片描述

这种错误一般都是手误导致的, 错误直译就是不能调用一个类作为一个函数。
这个错误一般情况下是不好找的,可以看到 错误详情第二部分指向的是ImageEquallyEnlarge.js 中的第11行, 这个文件是我创建的, 第11行是构造方法:

   constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            //状态机变量是一个style, 它将被用于定义显示图片的样式
            style: {}
        };
        this.onImageLayout=this.onImageLayout.bind(this);
    }

而错误地方一般不是第11行导致的,
原因很多, 我只列举下我的错误原因:
这个文件我声明了一个名字叫ImageEquallyEnlarge的组件, 为了方便使用,我声明了两个属性:

//控件属性
ImageEquallyEnlarge.propTypes = {
    originalWidth: React.PropTypes.number.isRequired,
    originalHeight: React.PropTypes.number.isRequired
};

而产生的错误恰恰是因为这处我不小心写错了一个单词,propTypes写成了prototype

//控件属性
// 声明必须要有的图片原始宽度与高度
ImageEquallyEnlarge.prototype = {
    ...
};

这样就导致了上面的错误。 有时候越是粗心犯的错误越是不好解决, 大家开发的时候一定要细心。

错误4

错误描述
cannot read property ‘stringify’ of undefined

Paste_Image.png
我们解析json对象是会用到stringify

let studentData = require('./data/student.json');
let newJSONString=JSON.stringify(studentData);

stringify是JSON对象中的方法, JSON是JS自带的API,不要在React Native中引入了。如果你引入JSON默认就指向了一个空的引用就会报这个错
所以千万不要在代码里这么写:

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    JSON  //不要写JSON
} from 'react-native';

更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
这里写图片描述

相关文章
|
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 的优势与限制
|
6天前
|
开发框架 前端开发 JavaScript
【专栏】Flutter vs React Native:跨平台移动应用开发的比较
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
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 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
59 1
|
10天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
3天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择