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

解决方案：将导出默认的className放入；相机组件文件底部的问题解决了我的问题

在React Native中导入和导出组件

1 个答案: