You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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在地图上对应坐标显示内容,虽然麻烦但能临时解决业务问题。

另外你提到的CalloutSubviewtooltip={true},在这个版本里确实也有类似的适配问题,暂时不建议用。如果还是解决不了,可以去react-native-maps的官方issues里搜一下,有很多同版本的用户反馈这个问题,后续官方应该会持续优化适配。

火山引擎 最新活动