React Native使用react-native-maps-directions绘制路线报错求助

问题场景 #

开发React Native地图功能时，使用react-native-maps-directions@^1.8.0绘制路线，已完成MapView加载和库引入的基础逻辑，但运行时出现以下报错：

控制台报错信息 #

Running "firstapp" with {"rootTag":1}
 ERROR  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

ERROR  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

   Check the render method of `MapViewDirections`.

相关代码与配置 #

TSX代码

import React, { useState } from 'react';
import {View} from 'react-native';
import MapView from 'react-native-maps';
import style from './style';
import MapViewDirections  from 'react-native-maps-directions';

const MapCls = () => {
  const [coordinates] = useState([
    {
      latitude: 48.8587741,
      longitude: 2.2069771,
    },
    {
      latitude: 48.8323785,
      longitude: 2.3361663,
    },
  ]);

  return (
    <View>
      <MapView
        style={style.map}
        showsUserLocation={true}
        showsBuildings={true}
        zoomEnabled={true}
        showsMyLocationButton={true}
        onMapReady={() => {}}>
        <MapViewDirections
          origin={coordinates[0]}
          destination={coordinates[1]}
          apikey={'give key here xyz.....'}
        />
      </MapView>
    </View>
  );
};
export default MapCls;

Package.json配置

{
  "name": "firstapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-maps": "^1.1.0",
    "react-native-maps-directions": "^1.8.0",
    "typescript": "^4.7.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/react": "^18.0.15",
    "@types/react-native": "^0.69.3",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

问题原因与修复方案 #

核心问题 #

1. react-native-maps-directions@1.8.0与当前React Native 0.68.2存在版本兼容性问题，导致组件导出失效，MapViewDirections被加载为undefined。
2. react-native-maps@^1.1.0与react-native-maps-directions@1.8.0版本不兼容，进一步加剧组件加载问题。
3. MapViewDirections的apikey属性拼写错误（应为apiKey，首字母大写）。

修复步骤 #

1. 调整依赖版本
   修改package.json中的依赖，使用适配React Native 0.68.x的版本组合：

   "dependencies": {
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-maps": "^0.31.1",
     "react-native-maps-directions": "^1.7.0",
     "typescript": "^4.7.4"
   }
   

   执行npm install或yarn install重新安装依赖。

2. 修正属性拼写
   将MapViewDirections的apikey改为apiKey：

   <MapViewDirections
     origin={coordinates[0]}
     destination={coordinates[1]}
     apiKey={'your-actual-api-key'}
   />
   

3. 清理缓存并重启项目
   清理React Native缓存，避免旧依赖残留：

   npx react-native start --reset-cache
   

   之后重新运行项目即可。

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