react-native - 如何使用 react-native-maps 更改 mapView.callout 的默认背景颜色？

Question

我正在尝试更改标注的背景颜色，但背景颜色不会影响整个视图。

这是我所拥有的屏幕截图：

我希望 backgroundColor 包含完整的工具提示。

这是我的代码：

<MapView.Callout
            style={{
              width: 200,
              height: 40,
              backgroundColor: '#107B67',
              borderRadius: 10,
              zIndex: 10
            }}
          >
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Text>logkjbkb</Text>
            </View>
          </MapView.Callout>

如何将 backgroundColor 设置为整个标注？

标签： react-nativemapsreact-native-maps

Answer 1

您需要将 Callout 组件上的 'tooltip' 属性设置为 true。

<MapView.Callout
    tooltip={true}
    style={{
        width: 200,
        height: 40,
        backgroundColor: '#107B67',
        borderRadius: 10,
        zIndex: 10
     }}
  >
</MapView.Callout>`

道具： 工具提示

类型： 布尔值 false

如果为false，则会在此标注子项周围绘制一个默认的“工具提示”气泡窗口。如果为true，子视图可以完全自定义它们的外观，包括任何类似“气泡”的样式。

这是参考：https ://github.com/react-native-community/react-native-maps/blob/master/docs/callout.md