React Native中未定义自定义组件

时间:2017-07-25 04:42:37

标签: react-native

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

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

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

然后我将其导入索引javascript文件:

    /**
 * 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设备上运行它,它会抛出“ 超级表达式必须为null或函数,而不是未定义 ”错误。该错误导致SimpleButton类声明代码行('export default class SimpleButton extends React.Component'。

我目前使用最新版本的React Native。我搜索了一些解决方案但没有工作。请帮帮我!

1 个答案:

答案 0 :(得分:1)

您正在使用import React from react-native,它实际上并不存在于react-native中。你应该import React from react本身 - 而不是。我已经修复了下面的SimpleButton类。

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>
    );
  }
}

您还可以添加以下内容 - &gt; import {Component} from 'react';然后只需将此功能用作export default class Test extends Component{...

(注意这一行取代了之前提到的import React from 'react'解决方案)

希望这有帮助