React native 天然反应；如何正确导入文件？

导入我的一个文件时出现问题。这是我的“票”档案。 我将其导出到下面我将发布给您的代码中。然后我将其导入到导航文件中，但出现错误。。。所有其他的导入都有效。我知道我犯了一个错误，但我找不到。你可以在我的截图中看到树状结构

如果你能帮助或指导我，非常感谢

import React, { Component } from 'react';
import { Text, TouchableOpacity, AppRegistry, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
import styles from '../../../assets/styles';

export default class Tickets extends Component {
  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);
    }
  };
}
AppRegistry.registerComponent('Tickets', () => Tickets);

import React，{Component}来自'React'；
从“react native”导入{Text，TouchableOpacity，AppRegistry，View}；
从“react native camera”导入{RNCamera}；
从“../../../assets/styles”导入样式；
导出默认类扩展组件{
render（）{
返回(
{
this.camera=ref；
}}
style={style.preview}
类型={RNCamera.Constants.type.back}
flashMode={RNCamera.Constants.flashMode.on}
androidCameraPermissionOptions={{
标题：“使用相机的权限”，
信息：“我们需要您的许可才能使用您的相机”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
androidRecordAudioPermissionOptions={{
标题：“使用录音的许可”，
消息：“我们需要您的许可才能使用您的音频”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
onGoogleVisionBarcodesDetected={（{barcodes}）=>{
控制台日志（条形码）；
}}
/>
断裂
);
}
takePicture=async（）=>{
如果（这个相机）{
const options={quality:0.5，base64:true}；
const data=wait this.camera.takePictureAsync（选项）；
log（data.uri）；
}
};
}
AppRegistry.registerComponent（'Tickets'，（）=>Tickets）；

---

我不知道为什么，但这样做：它可以工作：（PureComponent？？）

import React，{PureComponent}来自'React'；
从“react native”导入{Text，TouchableOpacity，View}；
从“react native camera”导入{RNCamera}；
从“../../../assets/styles”导入样式；
导出默认类组件{
render（）{
返回(
{
this.camera=ref；
}}
style={style.preview}
类型={RNCamera.Constants.type.back}
flashMode={RNCamera.Constants.flashMode.on}
androidCameraPermissionOptions={{
标题：“使用相机的权限”，
信息：“我们需要您的许可才能使用您的相机”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
androidRecordAudioPermissionOptions={{
标题：“使用录音的许可”，
消息：“我们需要您的许可才能使用您的音频”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
onGoogleVisionBarcodesDetected={（{barcodes}）=>{
控制台日志（条形码）；
}}
/>
断裂
);
}
takePicture=async（）=>{
如果（这个相机）{
const options={quality:0.5，base64:true}；
const data=wait this.camera.takePictureAsync（选项）；
log（data.uri）；
}
};
}

在导入末尾添加分号此文件中是否有名为Tickets的变量？为什么在Tickets屏幕中使用AppRegistry？AppRegistry.registerComponent（'Tickets'，（）=>Tickets）；分号没有改变问题中的任何东西，但我还是改变了，谢谢。我没有其他变量称为Tickets。我删除了Appregistry。我不知道为什么，但通过Purecomponent更改组件是有效的不知道为什么。。。感谢你们三位回答并帮助我。：）

import React, { PureComponent } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
import styles from '../../../assets/styles';

export default class Tickets 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);
    }
  };
}