如何在React Native Maps中定位固定位置的标注？

Question

我正在尝试将标注定位在屏幕底部，并将其固定在此位置，即使地图正在移动？有没有人有幸用React Native Maps实现了这一点？

我所有的尝试都没有将标注固定在屏幕底部。我发现的唯一方法是避免使用由react-native-map提供的标注组件。

以下是标注的代码：

<Callout 
    tooltip
    style={styles.itemContainer}
>
    <CalloutSubview 
        style={styles.button} 
        onPress={closeCallout}
    >
        <Ionicons name="ios-close-circle" size={30} style={styles.icon} />
    </CalloutSubview>
    <SemiBoldHeadline 
        fontSize={18}
        text={title}
        marginTop={0}
        marginBottom={4}
        marginRight={30}
    />
    <BodyText 
        fontSize={14}
        lineHeight={18}
        marginRight={30}
    >
        {editedString}
    </BodyText>
    <View style={styles.inlineContainer}>
        <CalloutSubview onPress={() => RouteService.openMaps(coordinates.latitude, coordinates.longitude, title)}>
            <SmallDirectionsButton />
        </CalloutSubview>
        <CalloutSubview onPress={readMoreFunction}>
            <ReadMoreButton 
                text={'Read More'}
            />
        </CalloutSubview>
    </View>
</Callout>

以下是标注的样式：

const styles = StyleSheet.create({
itemContainer: {
    borderRadius: 5,
    borderWidth: 1,
    borderColor: Colors.borderColor,
    width: Layout.window.width - 100,
    backgroundColor: Colors.white,
    padding: 20,
    paddingRight: 25
},
inlineContainer: {
    flexDirection: 'row', 
    flexWrap: 'wrap',
},
button: {
    position: 'absolute',
    top: 0,
    right: 0,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 30,
    zIndex: 10,
},
icon: {
    color: Colors.almostBlack,
    opacity: 0.5
}
});

Answer 1

如果你需要在地图上“静态”地呈现自定义react组件，你不应该使用地图的标注组件来构建它。而是创建一个视图，并将其绝对放置在地图组件的上方：

<>
  <Map .../>
  <View style={{ position: "absolute", bottom: "20"}}>
    {/* Your custom view content goes here*/}
  </View>
</>

标注组件只是为了直接在地图的上下文中使用而构建的，并且期望在地图移动时移动。