如何修复React native中的“需要模块“获取””错误？

Question

我目前正在从事React Native项目。我对此很陌生，这是我第一次使用本机响应。我正在使用expo在移动设备中进行渲染。我不断收到以下错误：

我不知道它从哪里来。我有以下代码。 app.js

import React, { Component } from 'react';
import { View,
     Text, 
     Image, 
     StyleSheet, 
     ImageBackground, 
     Button, 
     Alert,
    AppRegistry
} 
    from 'react-native';


import { StackNavigator } from 'react-navigation';
import HomeScreen from './Screens/HomeScreen';
import myComm from './Screens/Community';
import GeoTag from './Screens/GeoTag';
const AppNavigator = StackNavigator({
    HomeScreen: { screen: HomeScreen },
    MyComm: { screen: myComm },
    GeoTag: { screen: GeoTag },
})

export default class mainApp extends Component{
    render(){
        return(
      <AppNavigator/>

        );
    }
}

AppRegistry.registerComponent('Aarogya', () => mainApp);

HomeScreen.js：

import React, { Component } from 'react';
import { View,
     Text, 
     Image, 
     StyleSheet, 
     ImageBackground, 
     Button, 
     Alert } 
     from 'react-native';

class HomeScreen extends Component{
    render(){
        return(
            <View style = { styles.container }>
                <ImageBackground source={require('../img/wall.png')} style = { styles.backgroundImage }>
                    <Text style = { styles.appHeading }> AaROGYA </Text>
                    { /*   Homescreen Buttons */ }

                <View style = { styles.buttonGrid }>

                    <View style = { styles.horizonGrid }>
                        <View style = { styles.localButton }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'GeoTag Waste'
                                onPress = {() => this.props.navigation.navigate('GeoTag')}
                            />
                        </View>
                        <View style = { styles.localButton }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'My Community'
                                onPress = {() => this.props.navigation.navigate('MyComm')}
                            />
                        </View>
                    </View>

                    <View style = { styles.horizonGrid }>
                        <View style = { styles.localButton }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'Score Card'
                                onPress = {() => { Alert.alert("GeoTagging to be Updated."); }}
                            />
                        </View>
                        <View style = { styles.localButton }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'Notifications'
                                onPress = {() => { Alert.alert("GeoTagging to be Updated."); }}
                            />
                        </View>

                    </View>
                </View>

                </ImageBackground>
            </View>
        );
    }
}

export default HomeScreen;

const styles = StyleSheet.create({

    appHeading: {
        color: '#0a9dd8',
        backgroundColor: 'white',
        fontSize: 28,
        fontWeight: 'bold',
        textAlign: 'center',
        fontFamily: 'monospace',
    },

    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
        flexDirection: 'column',
        height: '100%',
},

    buttonGrid: {
        flexWrap: 'wrap',
        flexBasis: '20%', 
         top: "50%",},

    horizonGrid: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        margin: 5,

    },


    localButton: {
        flex: 1,
        borderWidth: 0.5,
        borderColor: 'white',
        height: 45,
        width: 260,
        marginBottom: 3,
    },
    buttonText: {
        fontSize: 20,
        fontFamily: "notoserif",
    },
    backgroundImage: {
    flex: 1,
        height:'100%',
        width: '100%',
  },

});

以下是我的Camera.js

import React, { Component } from 'react';
import { View,
    Text, 
    Image, 
    StyleSheet, 
    ImageBackground, 
    Button,
    TouchableOpacity,   
    Alert } 
    from 'react-native';

import { Camera, Permissions } from 'expo';




class CameraComponent extends Component{

    state = {
        hasCameraPermission: null,
        type: Camera.Constants.Type.back
    };

    async componentWillMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === 'granted' });
      }

      render() {
        const { hasCameraPermission } = this.state;
        if (hasCameraPermission === null) {
          return <View />;
        } else if (hasCameraPermission === false) {
          return <Text>No access to camera</Text>;
        } else {
          return (
            <View style={{ flex: 1 }}>
              <Camera style={{ flex: 1 }} type={this.state.type}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: 'transparent',
                    flexDirection: 'row',
                  }}>
                  <TouchableOpacity
                    style={{
                      flex: 0.1,
                      align: 'flex-end',
                      alignItems: 'center',
                    }}
                    onPress={() => {
                      this.setState({
                        type: this.state.type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back,
                      });
                    }}>
                    <Text
                      style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                      {' '}Flip{' '}
                    </Text>
                  </TouchableOpacity>
                </View>
              </Camera>
            </View>
          );
        }
      }
}




const styles = StyleSheet.create({
    container: {

    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
    height: '100%',
    },

    backgroundImage: {
        flex: 1,
            height:'100%',
            width: '100%',
      },
})

export default CameraComponent;

所以基本上发生了什么事，我的应用程序有一个主屏幕，该主屏幕上有一个名为Geo Tag的按钮。当我按下按钮时，应该打开相机。 GeoTag.js

import React, { Component } from 'react';
import { View,
    Text, 
    Image, 
    StyleSheet, 
    ImageBackground, 
    Button, 
    Alert } 
    from 'react-native';
import Camera from '../Components/Camera';

class GeoTag extends Component{
    render(){
        return(
            <Camera></Camera>


        );
    }
}

const styles = StyleSheet.create({

    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
    height: '100%',
    },

    backgroundImage: {
        flex: 1,
            height:'100%',
            width: '100%',
      },
})

export default GeoTag;