react-native - 如何防止注释点的样式出现丢失，完全变黑？

Question

我正在使用 react-native-mapbox-gl 库，并且在地图上显示了一些点。每个都有自己的标注，以在按下相应的点时显示附加信息。

我在 example/src/examples/ShowPointAnnotation.js 中找到了 docs/Callout.md 和 Callout.js 源和使用它的示例。这是一个很大的帮助，非常感谢你的例子......我可能会做一些非常错误的事情，我已经花了几天时间......

我的问题是，当我按下一个注释时，注释的样式似乎丢失了（它们全黑）。相似的是，标注的样式似乎没有被应用。他们也都是黑色的。我在下面分享了代码和屏幕截图。

<MapboxGL.PointAnnotation
    key={id}
    id={id}
    coordinate={coordinate}
    title={title}
    onSelected={feature => {
        debugger
        this.onAnnotationSelected(i, feature)
    }}
    onDeselected={this.onAnnotationDeselected}
>
    <View
        style={[
            styles.annotationContainer,
            {
                backgroundColor: bgColour,
                borderRadius: ANNOTATION_SIZE / 2,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: borderColor
            }
        ]}
    >
        <Text style={[styles.annotationFill, { color: borderColor }]}>
            {studio.id}
        </Text>
    </View>             
    <MapboxGL.Callout
        style={[
            styles.calloutContainer,
            { backgroundColor: bgColour, borderColor: borderColor }
        ]}
        title={title}
    >
        <View
            style={[
                styles.calloutContent,
                {
                    backgroundColor: bgColour,
                    borderColor: borderColor
                }
            ]}
        >
            <Text style={[styles.annotationFill, { color: borderColor }]}>
                {title}
            </Text>
        </View>
        <View
            style={[
                styles.tip,
                styles.calloutContent,
                {
                    backgroundColor: bgColour,
                    borderColor: borderColor
                }
            ]}
        />
    </MapboxGL.Callout>     
</MapboxGL.PointAnnotation>

和款式

const ANNOTATION_SIZE = 32

const styles = StyleSheet.create({
    annotationContainer: {
        width: ANNOTATION_SIZE,
        height: ANNOTATION_SIZE,
        alignItems: 'center',
        justifyContent: 'center'
    },
    annotationFill: {
        color: 'black'
    },
    container: {
        flex: 1
    },
    calloutContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 180,
        zIndex: 9999999
    },
    calloutContent: {
        flex: 1,
        position: 'relative',
        padding: 8,
        borderRadius: 3,
        borderWidth: 1
    },
    calloutTitle: {
        width: ANNOTATION_SIZE,
        height: ANNOTATION_SIZE,
        color: 'black',
        textAlign: 'center'
    },
    calloutTip: {
        zIndex: 1000,
        marginTop: -2,
        elevation: 0,
        backgroundColor: 'transparent',
        borderTopWidth: 16,
        borderRightWidth: 8,
        borderBottomWidth: 0,
        borderLeftWidth: 8,
        borderTopColor: 'white',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent'
    }
})

我也担心我不应该使用 PointAnnotation，因为它被标记为已弃用。有没有其他方法可以达到同样的效果？有人能指出我正确的方向吗？如果需要，我也很乐意做出贡献。