为什么我的自定义 React 本机组件无法正确导入

Question

当前，我有一个简单的React Native Expo应用程序设置。我有两个组件应用程序和QRReader。

我正在尝试将QRReader组件导入到我的主要应用程序组件中。

主应用程序组件代码...

import React, { Component } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { Constants, WebBrowser } from 'expo';
import QRreader from './qr';
export default class App extends Component {
  state = {
    result: null,
  };
  render() {
    return (
      <View style={styles.container}>
        <QRreader/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

QR组件代码...

import React, { Component } from 'react';
import { Text, View, StyleSheet, Alert } from 'react-native';
import { Constants, BarCodeScanner, Permissions } from 'expo';
export default class QRreader extends Component {
  state = {
    hasCameraPermission: null
  };
  componentDidMount() {
    this._requestCameraPermission();
  }
  _requestCameraPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted',
    });
  };
  _handleBarCodeRead = data => {
    Alert.alert(
      'Scan successful!',
      JSON.stringify(data)
    );
  };
  render() {
    return (
      <View style={styles.container}>
        {this.state.hasCameraPermission === null ?
          <Text>Requesting for camera permission</Text> :
          this.state.hasCameraPermission === false ?
            <Text>Camera permission is not granted</Text> :
            <BarCodeScanner
              onBarCodeRead={this._handleBarCodeRead}
              style={{ height: 200, width: 200 }}
            />
        }
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

我使用" ./""尝试了导入的不同变化。" qr.js" qr"

im获取错误无法解析模块" qr.js"模块在主模块地图中不存在。

我的文件结构在这里

Answer 1

您尚未注册主模块。

AppRegistry.registerComponent('Main', () => App);请将这一行添加到课堂的底部，并检查问题是否持续。

Answer 2

hmm ...因此，看起来我必须重新启动博览会项目才能在不添加任何其他代码的情况下工作。

只是出于好奇吗？我在哪里添加appRegistry.registercomponent（'main'，（）=> app）;确切地？为什么我必须这样做？