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

我使用＆＃34; ./"尝试了导入的不同变体; ＆＃34;＆＃34; ＆＃34; qr.js＆＃34; ＆＃34; QR＆＃34;

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

我的文件结构是Here

Answer 1

您还没有注册主模块。

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

Answer 2

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

出于好奇心？我在哪里添加AppRegistry.registerComponent（'Main'，（）=＆gt; App）;究竟？为什么我必须这样做？

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

2 个答案: