如何在加载时打开 React Native Maps 标记的标注
How to open callouts for React Native Maps markers upon loading
我希望在安装屏幕组件时打开所有标记的所有标注。目前,它只有在点击标记时才会打开。如何在功能组件中使用 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>
当我console.log(markerRef.current)
时,它没有提供showCallout()
方法。
最简洁的方法是创建您自己的视图作为标记。
Arbitrary React Views as Markers
您可以查看标记 here 的示例。
这是一个使用 here.
的例子
这只是一个开始。您可以将自己的点击处理程序放在标记上并将其隐藏。
所以,这可能不太理想,但可以作为一种技巧。
从渲染函数开始。
renderCallout() {
if(this.state.calloutIsRendered === true) return;
this.setState({calloutIsRendered: true});
this.markerRef.showCallout();
}
然后添加到onRegionChangeComplete事件中。
<MapView
onRegionChangeComplete={() => this.renderCallout()}
...
>
我希望在安装屏幕组件时打开所有标记的所有标注。目前,它只有在点击标记时才会打开。如何在功能组件中使用 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>
当我console.log(markerRef.current)
时,它没有提供showCallout()
方法。
最简洁的方法是创建您自己的视图作为标记。 Arbitrary React Views as Markers
您可以查看标记 here 的示例。 这是一个使用 here.
的例子这只是一个开始。您可以将自己的点击处理程序放在标记上并将其隐藏。
所以,这可能不太理想,但可以作为一种技巧。 从渲染函数开始。
renderCallout() {
if(this.state.calloutIsRendered === true) return;
this.setState({calloutIsRendered: true});
this.markerRef.showCallout();
}
然后添加到onRegionChangeComplete事件中。
<MapView
onRegionChangeComplete={() => this.renderCallout()}
...
>