我正在尝试将airbnb的react-native-maps用于我的react本地应用程序,但该地图未显示在设备上。安装模块时,请遵循文档(here)中提到的说明。还将权限添加到AndroidManifest文件中的应用程序。
build.gradle文件
buildscript {
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1"
googlePlayServicesVersion = "11.8.0"
androidMapsUtilsVersion = "0.5+"
}
repositories {
jcenter()
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'
}
}
依赖关系通过以下版本添加到源文件夹内的bilde.gradle文件中
dependencies {
implementation project(':react-native-maps')
}
App.js文件
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
import Component6 from './app/components/Component6/Component6'
import UsersMap from './app/components/Component6/UsersMap'
export default class App extends Component {
getLocationHandler = () => {
navigator.geolocation.getCurrentPosition(position => {
console.log(position);
}, err => console.log(err));
}
render() {
return (
<View>
<Component6 onGetLocation={this.getLocationHandler} />
<UsersMap />
</View>
);
}
}
AppRegistry.registerComponent('App', () => App);
Component6.js文件
import React from 'react';
import {Button} from 'react-native';
const fetchLocation = props => {
return(
<Button title="Get Location" onPress = {props.onGetLocation}
/>
);
};
export default fetchLocation;
UsersMap.js文件
import React from 'react';
import {View, StyleSheet} from 'react-native';
import MapView from 'react-native-maps';
const usersMap = props => {
return(
<View styles={styles.mapContainer}>
<MapView styles={styles.map}/>
</View>
);
};
const styles = StyleSheet.create({
mapContainer : {
width : '100%',
height : 200
},
map : {
width : '100%',
height : '100%'
}
});
export default usersMap;
navigator.geolocation.getCurrentPosition
将当前位置返回到控制台,但是地图未显示在设备上。任何建议将不胜感激。