在 React Native 中导入和导出组件

Question

我是 ReactNative 的新手，我正在尝试使用我从工作区中的文件导入的组件，但我收到了这个错误：

不变量违反：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我检查以确保我的文件路径正确，我做到了。我还在它的文件中导出了我的类，所以我也没有发现这是问题所在。这是我在 App.js 中的内容：

import ExampleApp from './src/components/ExampleApp';
import {AppRegistry} from 'react-native';

AppRegistry.registerComponent('App', () => ExampleApp);

and here's what I have in my components file:
import React, {PureComponent} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import {RNCamera} from 'react-native-camera';

export default class ExampleApp extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          onGoogleVisionBarcodesDetected={({barcodes}) => {
            console.log(barcodes);
          }}
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
          <TouchableOpacity
            onPress={this.takePicture.bind(this)}
            style={styles.capture}>
            <Text style={{fontSize: 14}}> SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  takePicture = async () => {
    if (this.camera) {
      const options = {quality: 0.5, base64: true};
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'yellow',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 70,
    alignSelf: 'center',
    margin: 20,
  },
});

Answer 1

解决方法：把export default className;在我的相机组件文件的底部解决了我的问题