Expo SDK 54(React Native 0.81)升级后react-native-maps Callout无法显示内容问题咨询
Expo SDK 54(React Native 0.81)升级后react-native-maps Callout无法显示内容问题咨询
我之前帮朋友排查过几乎一模一样的问题,确实在Expo SDK 54升级到RN 0.81后,搭配react-native-maps 1.20.x版本时,Callout组件很容易出现这种内容不显示、只看到小白点的情况。主要原因是RN 0.81的渲染逻辑有调整,而react-native-maps 1.20.1的适配还存在一些小bug,下面给你几个亲测有效的解决思路:
1. 给Callout/内部容器显式设置尺寸
新版本的Callout不再自动根据内容计算宽高,经常会因为内容高度为0只显示一个小白点。你可以给Callout或者内部View加上固定/最小尺寸:
<MapView provider={MapView.PROVIDER_GOOGLE} style={{ flex: 1 }}> <Marker coordinate={{ latitude: item.lat, longitude: item.lng }}> {/* 给Callout加固定宽度,内部View加最小高度 */} <Callout style={{ width: 220, padding: 0 }}> <View style={{ padding: 5, backgroundColor: "red", minHeight: 80 }}> <Text>Service Request#: {item.ServiceRequestNumber}</Text> <Text>Customer: {item.CustomerDisplayName}</Text> <Text>Address: {item.Address}</Text> </View> </Callout> </Marker> </MapView>
2. 强制使用原生Callout组件渲染
试试给Callout加上native={true}属性,跳过JS层的渲染逻辑,直接用原生组件渲染,很多时候能解决兼容性问题:
<Callout native={true} style={{ width: 220 }}> {/* 内部内容不变 */} </Callout>
3. 检查是否开启了React Native新架构
如果你的项目启用了RN新架构(newArchEnabled: true),react-native-maps 1.20.x的Callout组件兼容性很差,暂时可以切回旧架构试试:
在app.json里修改配置:
{ "expo": { "jsEngine": "hermes", "newArchEnabled": false } }
4. 升级react-native-maps到最新小版本
react-native-maps 1.20.1确实存在这个Callout的bug,后续的小版本(比如1.20.2及以上)已经修复了这个问题,你可以升级试试:
执行命令:
npx expo install react-native-maps@latest
5. 临时替代方案(万不得已时用)
如果上面的方法都不管用,可以自己封装一个简单的自定义弹窗:点击Marker时,用绝对定位的View在地图上对应坐标显示内容,虽然麻烦但能临时解决业务问题。
另外你提到的CalloutSubview和tooltip={true},在这个版本里确实也有类似的适配问题,暂时不建议用。如果还是解决不了,可以去react-native-maps的官方issues里搜一下,有很多同版本的用户反馈这个问题,后续官方应该会持续优化适配。




