将 Polyline 与 react-native 地图一起使用时出现空引用错误

Question

When I use Polyline it gives me this error: attempt to invoke interface method 'java.util.iterator java.util.list.iterator()' on a null object

At first, I thought I made something wrong or I mis-used google-map API so I tried with some hard-coded coords (as shown in my code below) but without any progress. The code will run fine if I remove the Polyline part. I googled hoping to find any solution but without any success also.

• some info my about dev platform:
• expo version 2.19.1
• yarn version 1.16.0
• Node version 10.15.2

Testing on a physical device with android PI installed.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Permissions, MapView } from 'expo'

// import Polyline from '@mapbox/polyline'
import { Polyline } from 'react-native-maps'

const locations = require('./locations.json')

export default class App extends React.Component {

  state = {
    latitude: null,
    longitude: null,
    locations: locations
  }

  componentDidMount() {
    this.GetLocations()
  }


  GetLocations = async () => {
    const { status } = await Permissions.getAsync(Permissions.LOCATION)
    if (status !== 'granted') {
      const response = await Permissions.askAsync(Permissions.LOCATION)
    }

    navigator.geolocation.getCurrentPosition(
      ({ coords: { latitude, longitude }}) => this.setState({ latitude, longitude}, this.mergeCoords),
      (err) => console.log(`Error: ${err}`)
    )

    const { locations: [sampleLocation] } = this.state
    this.setState({
      desLatitude: sampleLocation.coords.latitude,
      desLongitude: sampleLocation.coords.longitude,
    }, this.mergeCoords)
  }

  mergeCoords = () => {
    const { latitude, longitude, desLatitude, desLongitude } = this.state
    const hasStartAndEnd = ( latitude !== null && desLatitude !== null )

    // if the line have start and end 
    if (hasStartAndEnd) {
      const concatStart = `${latitude},${longitude}`
      const concatEnd = `${desLatitude},${desLongitude}`
      this.getDirections(concatStart, concatEnd)
    }
  }


  async getDirections(startLoc, desLoc) {
    try {
      // const res =  await fetch(`https://maps.googleapis.com/maps/api/directions/json?key=MY_API_KEY&origin=${startLoc}&destination=${desLoc}`)
      // const resJson = await res.json()
      // const points = Polyline.decode(resJson.routes[0].overview_polyline.points)
      // const coords = points.map( point => {
      //   return {
      //     latitude: point[0],
      //     longitude: point[1]
      //   }
      // })


      const coords = {
        latitude: 31.262353,        
        longitude: 29.989506,     
      }
      console.log("point, coords: ", coord)
      this.setState({coords})

    } catch(err) {
      console.log('Error: ', err)
    }
  }

  render() {
    const { latitude, longitude, coords } = this.state

    if (latitude) {
      return (
        <MapView 
          style={{ flex: 1 }}
          showsUserLocation
          initialRegion={{
            latitude,
            longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421, 
          }}
        >
          <MapView.Polyline
            strokeWidth={2}
            strokeColor="red"
            coordinates={coords}
          />

        </MapView>
      )
    }

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>We need your permissions !!</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

//use condional rendering
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Permissions, MapView } from 'expo'

// import Polyline from '@mapbox/polyline'
import { Polyline } from 'react-native-maps'

const locations = require('./locations.json')

export default class App extends React.Component {

state = {
latitude: null,
longitude: null,
locations: locations,
direct : false

}

componentDidMount() {
this.GetLocations()
}


GetLocations = async () => {
const { status } = await Permissions.getAsync(Permissions.LOCATION)
if (status !== 'granted') {
  const response = await Permissions.askAsync(Permissions.LOCATION)
}

navigator.geolocation.getCurrentPosition(
  ({ coords: { latitude, longitude }}) => this.setState({ latitude, longitude}, 
this.mergeCoords),
  (err) => console.log(`Error: ${err}`)
)

const { locations: [sampleLocation] } = this.state
this.setState({
  desLatitude: sampleLocation.coords.latitude,
  desLongitude: sampleLocation.coords.longitude,
}, this.mergeCoords)
}

mergeCoords = () => {
const { latitude, longitude, desLatitude, desLongitude } = this.state
const hasStartAndEnd = ( latitude !== null && desLatitude !== null )

// if the line have start and end 
if (hasStartAndEnd) {
  const concatStart = `${latitude},${longitude}`
  const concatEnd = `${desLatitude},${desLongitude}`
  this.getDirections(concatStart, concatEnd)
}
}


async getDirections(startLoc, desLoc) {
try {
  // const res =  await fetch(`https://maps.googleapis.com/maps/api/directions/json? 
  key=MY_API_KEY&origin=${startLoc}&destination=${desLoc}`)
  // const resJson = await res.json()
  // const points = Polyline.decode(resJson.routes[0].overview_polyline.points)
  // const coords = points.map( point => {
  //   return {
  //     latitude: point[0],
  //     longitude: point[1]
  //   }
  // })


  const coords = {
    latitude: 31.262353,        
    longitude: 29.989506,     
  }
  console.log("point, coords: ", coord)
  this.setState({coords, direct:true})

} catch(err) {
  console.log('Error: ', err)
}

}

render() {
const { latitude, longitude, coords } = this.state

if (latitude) {
  return (
    <MapView 
      style={{ flex: 1 }}
      showsUserLocation
      initialRegion={{
        latitude,
        longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421, 
      }}
    >
{this.state.direct &&    
<MapView.Polyline
        strokeWidth={2}
        strokeColor="red"
        coordinates={coords}
      />}

    </MapView>
  )
}

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text>We need your permissions !!</Text>
  </View>
)

} }