如何在 React Native Maps 中以固定位置定位标注？答案

【问题标题】：How do I position the callout with a fixed position in React Native Maps?如何在 React Native Maps 中以固定位置定位标注？
【发布时间】：2021-01-07 17:29:22
【问题描述】：

我正在尝试将标注定位在屏幕底部，并在地图移动时将其固定到该位置？有没有人通过 React Native Maps 实现了这一点？

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

这是标注的代码：

<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
}
});

【问题讨论】：

标签： react-native expo react-native-maps

【解决方案1】：

如果您需要在地图上方“静态”呈现自定义反应组件，则不应使用地图的标注组件来构建它。相反，创建一个视图并将其绝对定位在地图组件上方：

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

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

【讨论】：