React Native 中未定义的自定义组件 [英] Custom component undefined in React Native

问题描述

我在 javascript 文件中创建了一个名为 SimpleButton 的自定义组件:

I create a custom component called SimpleButton in a javascript file:

import React, {
  Text,
  View
} from 'react-native';

export default class SimpleButton extends React.Component{
  render(){
    return (
      <View>
        <Text>Simple Button</Text>
      </View>
    );
  }
}

然后我将它导入到索引 javascript 文件中:

Then I import it to index javascript file:

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';

import SimpleButton from './App/Components/SimpleButton';

class ReactNotes extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <SimpleButton/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('ReactNotes', () => ReactNotes);

最后，在 Android 设备上运行它，它抛出Super expression must be null or a function, not undefined"错误.错误导致 SimpleButton 类声明代码行('export default class SimpleButton extends React.Component'.

Finally, run it on a Android device, it throws " Super expression must either be null or a function, not undefined " error. The error leads to SimpleButton class declaration code line ('export default class SimpleButton extends React.Component'.

我目前使用的是最新版本的 React Native.我已经搜索了一些解决方案，但没有奏效.请帮帮我！

I currently use the latest version of React Native. I've searched some solutions but not works. Please help me!

推荐答案

您正在使用 import React from react-native ，它实际上并不存在于 react-native 中.您应该 从 react 本身导入 React - 相反.我已经修复了下面的 SimpleButton 类.

You are using import React from react-native , which is not actually present within react-native. You should import React from react itself - instead. I've fixed the SimpleButton class below.

import {
  Text,
  View
} from 'react-native';

import React from 'react';

export default class Test extends React.Component{
  render(){
    return (
      <View>
        <Text>Simple Button</Text>
      </View>
    );
  }
}

您也可以添加以下内容 -> import {Component} from 'react'; 然后简单地将此功能用作 export default class Test extends Component{...代码>,

You could also just add the following -> import {Component} from 'react'; and then simply use this feature as export default class Test extends Component{...,

(注意这一行替换了我之前提到的 import React from 'react'solution )

( note this line replaces the import React from 'react'solution i mentioned before )

希望能帮到你

这篇关于React Native 中未定义的自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！