React Native - 要素タイプが無効です：文字列が必要です

Question

私のアプリの中にいくつかの座標に基づいて静的なマップを表示したいと思います。

私は次のライブラリを使用しています：react-native-google-static-map

を私は次のことを行っている：

npm install --save react-native-google-static-map

をそして、私のビューに次を追加しました：

var GoogleStaticMap = require('react-google-static-map');

と

<GoogleStaticMap 
     style={styles.map} 
     latitude={'32.064171'} 
     longitude={'34.7748068'} 
     zoom={13} 
     size={{ width: 300, height: 550 }} 

これはうまくいきます。しかし、私は行くと見えて、私は次のエラーを取得する場合：.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method ofシングルSingleが私の見解のクラス名です。

私はここで間違っていますか？

全コード：

import React, { Component } from 'react'; import { View } from 'react-native'; 

import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TextInput, 
    TouchableHighlight, 
    ActivityIndicator, 
    NavigatorIOS, 
    ListView, 
    Image, 
    WebView, 

} from 'react-native'; 

var GoogleStaticMap = require('react-google-static-map'); 


class Single extends Component { 
    render() { 
    return (

     <Image style={styles.container} source={require('../../images/home.jpg')}> 
      <View style={styles.map}> 
      <GoogleStaticMap 
      style={styles.map} 
      latitude={'32.064171'} 
      longitude={'34.7748068'} 
      zoom={13} 
      size={{ width: 300, height: 550 }} /> 

       <View style={styles.business}> 
       <Text style={styles.businessName}>{this.props.property.street_address} {this.props.property.postcode}</Text> 
       </View> 
       <View style={styles.overview}> 
       <Text style={styles.heading}> 
        Overview 
       </Text> 

       <Text style={styles.bodyText}>{this.props.property.overview}</Text> 
       </View> 

       <View style={styles.overview}> 
       <Text style={styles.heading}> 
        Opening Hours 
       </Text> 

       <Text style={styles.bodyText}>Monday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Tuesday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Wednesday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Thursday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Friday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Saturday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       <Text style={styles.bodyText}>Sunday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text> 
       </View> 
      </View> 
     </Image> 

    ) 
    } 

} 

const styles = StyleSheet.create({ 

    business: { 
     backgroundColor: 'rgba(0,0,0,0.5)', 
     marginTop: 10, 
    }, 
    businessName: { 
     fontSize: 14, 
     padding:10, 
     color: '#ffffff' 
    }, 
    map: { 
     flex: 1, 
     marginTop: 30, 
     width: null, 
     height:10, 
    }, 
    overview: { 
     marginTop: 30, 
     left:0, 
     height:null, 
     backgroundColor: 'rgba(0,0,0,0.5)', 

    }, 
    bodyText: { 
     color: '#ffffff', 
     padding: 10, 
    }, 
    heading: { 
     padding:5, 
     backgroundColor: '#008983', 
     color: '#ffffff' 

    }, 
    container: { 
     flex: 1, 
     marginTop: 50, 
     width:null, 
     height:null, 

    }, 

    backdropView: { 
     top:100, 
     height: 200, 
     width: 320, 
     backgroundColor: 'rgba(0,0,0,0.5)', 
    }, 
    headline: { 
     fontSize: 20, 
     textAlign: 'center', 
     padding:40, 
     backgroundColor: 'rgba(0,0,0,0)', 
     color: 'white' 
    }, 
    backdropViewTitle: { 
     color: 'white', 
     textAlign: 'center', 
     padding:10, 
     fontSize: 20, 

    }, 
    search: { 
     height:50, 
     fontSize: 15, 
     borderWidth: 1, 
     borderColor: '#fff', 
     borderRadius: 1, 
     color: '#fff', 
     width:295, 
     marginTop:10, 
     marginLeft:10, 
     padding:10 
    }, 

    content:{ 
     backgroundColor:'#ebeef0', 
     flex:1, 
     alignItems:'center'  //<----- 
    }, 
    messageBoxTitleText:{ 
     fontWeight:'bold', 
     color:'#fff', 
     textAlign:'center', 
     fontSize:20, 
     marginBottom:10 
    }, 
    messageBoxBodyText:{ 
     color:'#fff', 
     fontSize:16 
    }, 
    logo: { 
     top:50, 


    }, 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    }, 
    instructions: { 
     textAlign: 'center', 
     color: '#333333', 
     marginBottom: 5, 
    }, 

    flowRight: { 
     flexDirection: 'row', 
     alignItems: 'center', 
     width: 300, 
     left:60 
    }, 
    buttonText: { 
     fontSize: 18, 
     color: 'white', 
     alignSelf: 'center' 
    }, 
    button: { 
     top:10, 
     left:10, 
     height: 40, 
     width:100, 
     flexDirection: 'row', 
     backgroundColor: '#48BBEC', 
     borderColor: '#48BBEC', 

     marginBottom: 10, 
     alignSelf: 'stretch', 
     justifyContent: 'center' 
    }, 
    searchLocation: { 
     height: 36, 
     padding: 4, 
     marginRight: 5, 
     flex: 5, 
     fontSize: 10, 
     borderWidth: 1, 
     borderColor: '#48BBEC', 
     borderRadius: 8, 
     color: '#48BBEC', 

    }, 

    searchInput: { 
     height: 36, 
     padding: 4, 
     marginRight: 5, 
     flex: 4, 
     fontSize: 10, 
     borderWidth: 1, 
     borderColor: '#48BBEC', 
     borderRadius: 8, 
     color: '#48BBEC' 
    }, 

}); 
module.exports = Single; 

Answer 1

次のいずれかを実行する必要があります。

var GoogleStaticMap = require('react-native-google-static-map').default; 

または

import GoogleStaticMap from 'react-native-google-static-map';