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

Question

目前，我有一个简单的 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',
  },
});

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"

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

我的文件结构是Here

Answer 1

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

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

Answer 2

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

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

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

Why won't my Custom React Native Component Import Correctly

reactjs

react-native

expo