React Native 地图 - 空对象参考

React Native Maps - Null Object Reference

我正在学习有关 React Native 地图的教程:https://www.youtube.com/watch?v=MqLC0kOqrwk&t=1s

我的代码与导师的代码几乎相同(我没有使用 MapView.Markers)但是我得到这个错误:Attempt to invoke interface method '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}
            />
        );
    }
}

设法在新的 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" />