React Native Maps - 空对象引用

时间:2017-08-08 05:24:04

标签: react-native-maps

我在React Native Maps上关注本教程:https://www.youtube.com/watch?v=MqLC0kOqrwk&t=1s

我的代码与导师几乎相同(我没有使用MapView.Markers)但是我收到此错误:尝试调用接口方法'boolean 空对象引用上的abi19_0_0.com.facebook.react.bridge.ReadableMap.hasKey(java.lang.String)'

这是我的代码:

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import MapView from 'react-native-maps';

const { width, height } = Dimensions.get ('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height

const LATITUDE_DELTA = 0.0922
const LONGTITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

export default class MapScreen extends React.Component {

    constructor (props) {
        super (props)

        this.state = {
            initialPosition: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0,
                longitudeDelta: 0,
            }
        }
    }

    watchID: ?number = null

    componentDidMount () {
        navigator.geolocation.getCurrentPosition ((position) => {
            var lat = parseFloat (position.coords.latitude)
            var long = parseFloat (position.coords.longitude)

            var initialRegion = {
                latitude: lat,
                longitude: long,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGTITUDE_DELTA
            }

            this.setState ({ initialPosition: initialRegion })
        },
        (error) => alert (JSON.stringify (error)),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 })

        this.watchID = navigator.geolocation.watchPosition ((position) => {
            var lat = parseFloat (position.coords.latitude)
            var long = parseFloat (position.coords.longitude)

            var lastRegion = {
                latitude: lat,
                longitude: long,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGTITUDE_DELTA
            }

            this.setState ({ initialPosition: lastRegion })
        })
    }

    componentWillUnmount () {
        navigator.geolocation.clearWatch (this.watchID)
    }

    render () {
        return (
            <MapView
                style = { styles.mapContainer }
                region = {this.state.initialPosition}
            />
        );
    }
}

1 个答案:

答案 0 :(得分:0)

管理以使其在新的react-native init项目(RN 0.47.1,RNMaps 0.16.0)中工作,并将以下内容添加到 ./ android / app / src / main / AndroidManifest.xml < /强>:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<meta-data android:name="com.google.android.geo.API_KEY" android:value="WHATEVERYOURAPIKEYIS" />