如何在加载时打开 React Native Maps 标记的标注

我希望在安装屏幕组件时打开所有标记的所有标注。目前，它仅在单击标记时打开。如何在功能组件中使用 useRef 来执行此操作？

const markerRef = useRef(React.createRef)

return (
    <View style={styles.container}>
        <MapView 
            style={{ flex: 1 }} 
            region={region}
            onRegionChangeComplete={onRegionChangeComplete}
        >
            {data && data.posts.map(marker => (
                <Marker
                    ref={markerRef}
                    key={marker.id}
                    coordinate={{latitude: marker.latitude, longitude: marker.longitude }}    
                >
                    <Callout>
                        <Text>{marker.title}</Text>
                        <Text>{JSON.stringify(marker.price)}</Text>
                    </Callout>
                </Marker>
            ))}
        </MapView>
        <View style={styles.inputContainer}> 
            <Icon name="magnify" size={30} color="lightgrey" />
            <TextInput 
                placeholder="Search Term"
                style={styles.input}
                onChangeText={setSearch}
                value={search}
                returnKeyType="search"
                onSubmitEditing={handleSubmit}
            />
        </View>
    </View>

When I console.log(markerRef.current)，它不提供showCallout() method.

最简洁的方法是创建您自己的视图作为标记。任意 React 视图作为标记 https://github.com/react-native-community/react-native-maps#arbitrary-react-views-as-markers

您可以看到标记的示例here https://github.com/react-native-community/react-native-maps/blob/master/example/examples/PriceMarker.js。 这是一个使用的例子here https://github.com/react-native-community/react-native-maps/blob/master/example/examples/ViewsAsMarkers.js.

这只是一个开始。您可以将自己的点击处理程序放在标记上并将其隐藏。

所以，这可能不太理想，但可能作为一种黑客手段。 从渲染函数开始。

renderCallout() {
    if(this.state.calloutIsRendered === true) return;
    this.setState({calloutIsRendered: true});
    this.markerRef.showCallout();
}

然后将其添加到 onRegionChangeComplete 事件中。

<MapView
  onRegionChangeComplete={() => this.renderCallout()}
  ...
>