反应本机地图未显示

时间:2018-10-10 08:04:34

标签: react-native react-native-maps

我正在尝试将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将当前位置返回到控制台,但是地图未显示在设备上。任何建议将不胜感激。

0 个答案:

没有答案