React-Native-Maps Lite模式在Ios模拟器上不起作用

时间:2018-11-12 15:24:15

标签: ios reactjs react-native react-native-ios react-native-maps

大家下午好,我正在用React native开发一个应用程序,我将库react-native-maps放在滚动视图中显示了一些固定的地图,在android中,我用标记显示了坐标,但是当我移动地图时,尝试滚动

我正在尝试使用staticmap,但是必须在ios中保留地图,而我却留空了。

import React, {Component} from 'react'
import {View, Text, TouchableOpacity, Platform, Image} from 'react-native'

import MapApp from './MapApp'

const staticMapURL = 'https://maps.googleapis.com/maps/api/staticmap'

class PropertyListCard extends Component {
	renderMap(){
		if(Platform.OS == 'ios'){
			console.log(Platform.OS)
			return(
				<View
					style={{
						width: 500,
						height:500,
						backgroundColor: 'red'
					}}
				>
				<Image
					source={{uri: "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=MyGoogleKey"}}
					style={{
						width: 200,
						height: 200
					}}
				/>
				</View>
			)
		}else{
			return(
				<MapApp />
			)
		}
	}

	render(){
		return(
			<View style={styles.container}>
				<View style={styles.titleContainer}>
					<Text style={styles.titleText}>
						{this.props.data.direction}
					</Text>
				</View>
				<View style={styles.mapContainer}>
					{this.renderMap()}
				</View>
				<TouchableOpacity
					style={styles.btn}
					onPress={()=>{}}
				>
					<Text
						style={styles.btnText}
					>
						Ver Vecinos
					</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = {
	container: {
		flex:1,
		backgroundColor: '#fff',
		margin: 10,
		borderRadius: 10
	},
	titleContainer:{
		height: 40,
		justifyContent: 'center',
		borderBottomWidth: 1,
		borderColor: 'grey'
	},
	titleText: {
		paddingLeft: 20,
		fontSize: 17,
		fontWeight: 'bold'
	},
	mapContainer:{
		width: '100%',
		height: 200
	},
	btn:{
		height: 50,
		width: '100%',
		backgroundColor: '#008591',
		borderBottomLeftRadius: 10,
		borderBottomRightRadius: 10,
		alignItems: 'center',
		justifyContent: 'center',
	},
	btnText: {
		color: '#fff',
		fontSize: 17,
		fontWeight: 'bold',
	}
}

export default PropertyListCard

1 个答案:

答案 0 :(得分:0)