【问题标题】:Why am I getting Typeerror super expression must either be null or a function?为什么我得到 Typeerror 超级表达式必须为 null 或函数?
【发布时间】:2020-05-31 05:56:30
【问题描述】:

所以我上周刚开始学习 React Native 以尝试学习开发应用程序。我一直在学习 Udemy 课程,在我尝试创建一个新组件之前,它一直进展顺利。我已经重读了 3 次课程,试图找出我的错误,但我似乎看不出代码之间的区别。请原谅我的业余错误,无论它在哪里。主 app.js 文件包含以下内容:

import React from 'react';
import { StyleSheet, Text, View, Platform, Image, ImageBackground } from 'react-native';
import {Button} from 'native-base';
import Landing from './src/Landing'
import { render } from 'react-dom';

var myBackground = require('./assets/icons/landing.jpg');

export default class App extends React.Component() {
  render() {
  return (
    <View style={styles.container}>
      <Landing />
    </View>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Platform.OS === "android" ? 50 : 0
  },
});

我的组件代码是这样的:

import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {Button} from 'native-base';

var myBackground = require('../assets/icons/landing.jpg');

class Landing extends React.Component {
    render() {
        return(
            <View>
                <ImageBackground style={ styles.imgBackground } source={myBackground}>
                    <View style={styles.viewStyle}>
                    <Text style={styles.titleStyle}>Welcome to PokeSearch</Text>
                    <Button block={true} style={styles.buttonStyle} onPress={()=>{}}>
                        <Text style={styles.buttonText}>Start Searching for Pokemon!</Text>
                    </Button>
                    </View>
                </ImageBackground>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Platform.OS === "android" ? 50 : 0
    },
    imgBackground: {
      width: '100%',
      height: '100%',
      flex: 1 
  },
  viewStyle: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: "center",
    alignItems: "center"
  },
  titleStyle: {
    fontSize: 30,
    color: 'red',
    alignItems: 'center',
  },
  buttonStyle: {
    margin: 10
  },
  buttonText: {
    color: 'red'
  },
  });


export default Landing;

任何帮助将不胜感激,我似乎找不到哪里出错了...... 这是模拟器中的完整错误: 提前致谢!

【问题讨论】:

    标签: android reactjs react-native components


    【解决方案1】:

    export default class App extends React.Component() 更改为export default class App extends React.Component,类组件中不需要括号。

    【讨论】:

    • 感谢您消除了错误,但现在我在命令行中收到此错误:找不到变量:ImageBackground * src\Landing.js:10:12 in render - node_modules\ react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:13042:21 in finishClassComponent .... 但是我没有将 imagebackground 设置为变量,它只是一个图像标签,所以我不确定为什么会这样将被识别为变量...
    • 你还没有在 Landing 组件中导入它。从库中导入它(从 'react-native' 导入 { ImageBackground })
    • @ShLuBsTeR,这些错误可能并不总是告诉你具体发生了什么,因为 React 库开发人员不容易猜测用户会犯的所有类型的错误。
    • 是的,谢谢你,我现在几乎把它完全修好了。现在显示按钮和文本,只是没有显示背景图像。对不起,我是一个开发人员太久没有实践了,所以我犯了愚蠢的错误。一年半前我被解雇了,然后我遇到了电脑问题,所以我才刚刚开始重新开始开发
    • 尽管我将图像背景设置为 但我认为修复它并没有付出太多努力,其他一切似乎都运行良好,所以我将继续学习本教程,感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 2023-04-10
    • 2021-10-20
    • 1970-01-01
    • 2021-06-11
    • 2016-09-23
    • 2023-01-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多