React Native调用google.maps.DirectionsService提示找不到google变量解决

报错原因 #

你混用了Web端Google Maps相关依赖和React Native原生地图组件，google是Web端加载完Google Maps JS SDK后才会注入的全局变量，React Native原生运行环境中不存在该变量，因此触发报错。

修复步骤 #

• 首先移除不兼容的Web端依赖：
  删掉代码中import DirectionsRenderer, { withScriptjs } from 'react-google-maps'这行导入，同时卸载项目中的react-google-maps依赖包，这个库是纯Web端使用的，完全不支持React Native环境。
• 删除冗余的Web端逻辑：
  你写的calculateRoute方法是Web端调用路线服务的写法，React Native中不需要这段逻辑，直接删除即可。同时删除开头的/* global google */全局变量声明，以及渲染部分的DirectionsRenderer组件渲染逻辑，这个组件同样是Web端专用。
• 复用现有React Native组件的能力：
  你已经引入了react-native-maps-directions组件，它已经封装了路线请求、绘制的全部逻辑，只要起点origin和终点destination赋值正确，它会自动完成路线加载。如果需要展示分步导航的文字说明，直接在MapViewDirections的onReady回调中，把返回结果的result.legs[0].steps字段存入state，遍历该数组即可拿到每一步的导航提示，渲染成Text组件即可。
• 修复代码中其他小问题：
  componentDidMount方法中的console.log(region)会触发未定义报错，修改为console.log(this.state.region)即可。

内容的提问来源于stack exchange，提问作者Syd