使用react-native-maps出现Element type is invalid错误求助

错误核心原因 #

你碰到的Element type is invalid错误，主要源于两个常见问题：

• 组件导出方式不符合Expo项目的默认要求
• react-native-maps的安装或导入逻辑不匹配开发环境

分步修复方案 #

1. 修正组件导出格式 #

你的代码使用了命名导出export const App，但Expo入口文件要求的是默认导出，这会导致Expo无法正确识别根组件。修改方式如下：

// 替换原有的命名导出为默认导出
const App = () => {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

export default App;

或者直接简化为：

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

2. 适配Expo环境的地图包安装 #

如果你是基于Expo开发，不要直接使用react-native-maps，需替换为Expo官方维护的expo-maps：

• 先卸载已安装的react-native-maps：

npm uninstall react-native-maps
# 或使用yarn
yarn remove react-native-maps

• 安装expo-maps：

npx expo install expo-maps

• 更新导入语句：

import MapView from 'expo-maps';

3. 额外验证项 #

• 执行npm install或yarn install确保依赖完整，然后重启Metro服务
• 可给MapView添加初始区域配置，确保地图能正常渲染（官方示例推荐）：

<MapView
  style={styles.map}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

修改完成后重启Metro服务，地图组件即可正常渲染。

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