1

我正在关注关于 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)' on空对象引用

这是我的代码：

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}
            />
        );
    }
}
4

1 回答 1

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" />

于 2017-08-16T16:47:54.080 回答