测试react-native-maps的Geojson组件遇React.createElement错误求助

测试react-native-maps的Geojson组件时，出现以下错误：

ERROR Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)

你使用的代码如下：

App.js #

import React from 'react';
import MapView, {Geojson} from 'react-native-maps';

const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      }
    }
  ]
};

const Map = props => (
  <MapView>
    <Geojson 
      geojson={myPlace} 
      strokeColor="red"
      fillColor="green"
      strokeWidth={2}
    />
  </MapView>
);

package.json #

{
  "name": "geojsonvalidation",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.6",
    "expo-app-loading": "^2.1.1",
    "expo-asset": "^8.9.1",
    "expo-font": "^11.1.1",
    "expo-status-bar": "~1.4.4",
    "geojson": "^0.5.0",
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-maps": "1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

问题原因 #

你安装的react-native-maps@1.3.2版本中，Geojson组件并未作为独立命名导出存在，官方文档示例对应更高版本API，直接解构导入{Geojson}会得到undefined，触发React类型无效错误。此外，代码缺少组件导出语句，且MapView未设置基础样式，会导致组件无法正常渲染。

解决方案 #

方案1：升级react-native-maps版本

升级到支持Geojson命名导出的版本（如1.8.0及以上），执行命令：

npm install react-native-maps@latest
# 或使用yarn
yarn add react-native-maps@latest

升级后保留原导入方式，补充组件导出和MapView样式：

import React from 'react';
import MapView, {Geojson} from 'react-native-maps';

const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      }
    }
  ]
};

const Map = props => (
  <MapView style={{flex: 1}}>
    <Geojson 
      geojson={myPlace} 
      strokeColor="red"
      fillColor="green"
      strokeWidth={2}
    />
  </MapView>
);

export default Map;

方案2：适配当前版本的用法

若不想升级，直接通过MapView.Geojson引用组件，修改App.js如下：

import React from 'react';
import MapView from 'react-native-maps';

const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      }
    }
  ]
};

const Map = props => (
  <MapView style={{flex: 1}}>
    <MapView.Geojson 
      geojson={myPlace} 
      strokeColor="red"
      fillColor="green"
      strokeWidth={2}
    />
  </MapView>
);

export default Map;

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