为什么我的自定义 React Native 组件导入不正确答案

【问题标题】：Why won't my Custom React Native Component Import Correctly为什么我的自定义 React Native 组件导入不正确
【发布时间】：2018-05-20 18:51:52
【问题描述】：

目前，我有一个简单的 React Native Expo 应用设置。我有两个组件 App 和 QRreader。

我正在尝试将 QRreader 组件导入到我的主 App 组件中。

主应用组件代码...

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

二维码组件码...

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"

我收到一个错误无法解析模块“qr.js”模块在主模块映射中不存在。

我的文件结构是Here

【问题讨论】：

标签： reactjs react-native expo

【解决方案1】：

你还没有注册你的主模块。

AppRegistry.registerComponent('Main', () => App);请将此行添加到您的班级底部并检查问题是否仍然存在。

【讨论】：

【解决方案2】：

hmm...所以看起来我必须重新启动 Expo 项目才能使其工作，而无需添加任何额外的代码。

只是出于好奇？我在哪里添加 AppRegistry.registerComponent('Main', () => App);确切地？为什么我必须这样做？

【讨论】：