[英]Map doesn't shown on android simulator when using react-native-maps
I am using react-native-maps for android development. 我正在使用react-native-maps进行android开发。 I followed the instruction from this link: https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md .
我遵循了来自此链接的说明: https : //github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md 。 After launch the app, the UI doesn't show the map.
启动应用程序后,UI不会显示地图。 Instead, it shows an empty page.
而是显示一个空白页。 Below is the code I used.
下面是我使用的代码。 The similar code works fine on iOS simulator.
类似的代码在iOS模拟器上也可以正常工作。 I don't know why not working on android.
我不知道为什么不能在android上工作。
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
ListView,
TextInput,
TouchableHighlight,
Dimensions,
MaterialButtonFixed,
//MapView,
} from 'react-native';
import MapView from 'react-native-maps';
class MapPage extends Component{
constructor(props){
super(props);
this.state = {
region:{
latitude: 4.21048,
longitude: 101.97577,
latitudeDelta: 1,
longitudeDelta: 10,
}
}
}
onRegionChange(region){
console.log('region changed ', region);
this.setState({region});
}
render() {
return(
<View style={styles.container}>
<MapView
ref="map"
style={ styles.map }
mapType={"standard"}
region={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
onRegionChange={this.onRegionChange.bind(this)}
>
</MapView>
</View>
)
}
}
const styles = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 30,
marginTop: 65,
flex:1,
padding: 30,
alignItems: 'center',
// flexDirection: 'row',
alignSelf: 'stretch',
backgroundColor: 'red',
},
inputText: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
module.exports = MapPage;
This is known problem, especially on Android 4.x. 这是已知问题,尤其是在Android 4.x上。 There may be several issues causing that, but first thing to do is to add Google Apps (and Play Services) to your simulator: How to install Google Play Services in a Genymotion VM (with no drag and drop support)?
可能有几个问题导致此问题,但首先要做的是将Google Apps(和Play服务)添加到模拟器中: 如何在Genymotion VM中安装Google Play服务(不支持拖放)?
Also read Issues section from react-native-maps repo, there may be helpful leads to fix your problem. 另请阅读react-native-maps存储库中的“问题”部分,可能会有有用的线索来解决您的问题。
I had a similar issue. 我有一个类似的问题。 I used
adb logcat
to trace it. 我使用
adb logcat
进行跟踪。
I discovered I had an issue with the package link (Fixed it with react-native link
) and the simulator device. 我发现程序包链接(已使用
react-native link
修复)和模拟器设备存在问题。
I added a detailed description of my solution here: Android Warning: Native component for "AIRMap" does not exist 我在这里添加了我的解决方案的详细说明: Android警告:“ AIRMap”的本地组件不存在
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.