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

【问题标题】：How to change the default background colour for mapView.callout using react-native-maps?如何使用 react-native-maps 更改 mapView.callout 的默认背景颜色？
【发布时间】：2019-06-25 07:58:37
【问题描述】：

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

这是我的截图：

我希望 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-native maps react-native-maps

【解决方案1】：

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

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

道具： 工具提示

类型： 布尔假

如果 false，默认的“工具提示”气泡窗口将围绕此标注子项绘制。如果 true，子视图可以完全自定义其外观，包括任何类似“气泡”的样式。

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

【讨论】：

【解决方案2】：

这对我有用（如果你想使用默认气泡）

创建样式为CustomCallout 的自定义标注@样式为{margin: -30; padding: 30; backgroundColor: "Your favorite color"} 的视图
在标注中使用它<Callout> <CustomCallout/> </Callout>

【讨论】：