0
我想在應用程序中顯示一些基於某些座標的靜態地圖。React Native - 元素類型無效:期望字符串
我使用下面庫: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 {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Tuesday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Wednesday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Thursday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Friday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Saturday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Sunday {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;
您可以從該頁面分享您的完整代碼? –
@TusharKhatiwada請參閱我的更新! – Phorce