在Expo React Native的SearchScreen中集成MapView报错求助

问题场景 #

开发狗狗领养APP，已实现主页、搜索页、个人资料页三个核心页面，尝试将MapView从App.js迁移到SearchScreen页面后，出现如下错误：

Element 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.

错误原因 #

1. 错误的导入项：react-native-maps中不存在名为Permissions的导出，同时App.js中导入了未使用的MapView和Permissions，属于冗余代码。
2. 冗余组件导入：SearchScreen中导入了仅需在App.js中使用的导航组件（NavigationContainer、createBottomTabNavigator），无实际用途。
3. MapView缺少必要属性：未设置initialRegion等核心属性，可能导致组件无法正常初始化。

修复步骤 #

1. 清理App.js中的冗余导入 #

删除App.js中未使用的react-native-maps相关导入：

// 移除该行
import { MapView, Permissions } from 'react-native-maps';

2. 修正SearchScreen的代码 #

移除冗余导航导入

删除SearchScreen中不需要的导航组件：

// 移除以下两行
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

修正MapView导入

react-native-maps中没有Permissions导出，若需权限申请，应使用Expo的expo-location或原生权限API，仅保留MapView的正确导入：

// 替换原导入为
import MapView from 'react-native-maps';
// 如果需要位置权限，添加（需先安装expo-location）
// import * as Location from 'expo-location';

为MapView添加初始区域属性

MapView需要initialRegion才能正常渲染，添加默认区域配置：

export function SearchScreen() {
  const initialRegion = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  return (
    <View style={styles.container}>
      <MapView 
        style={styles.map} 
        initialRegion={initialRegion}
      />
    </View>
  );
}

3. 确认依赖安装 #

确保已正确安装react-native-maps：

• Expo项目执行：expo install react-native-maps
• 裸React Native项目按照官方文档完成原生依赖配置

修复完成后重新运行项目，即可解决该报错。

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