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

vjhs03f7 于 2023-05-06 发布在 React

关注(0)|答案(2)|浏览(151)

我希望所有的标注为所有的标记，以打开后，安装屏幕组件。目前，它只有在点击标记时才能打开。如何在函数组件中使用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>

当I console.log(markerRef.current)时，它不提供showCallout()方法。

reactjs

来源：https://stackoverflow.com/questions/58291209/how-to-open-callouts-for-react-native-maps-markers-upon-loading

2条答案

按热度按时间

mm9b1k5b1#

最简洁的方法是创建自己的视图作为标记。任意React视图作为标记
您可以看到标记here的示例。这里是一个使用here的例子。
这只是个开始您可以将自己的单击处理程序放在标记上并隐藏它。
所以，这可能不太理想，但可能是一个黑客。从渲染函数开始。

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

然后将其添加到onRegionChangeComplete事件。

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

赞(0）回复(0）举报 2023-05-06

ilmyapht2#

我这样做了

在父组件中

<Marker_List_Start coordinate_start={Here I am passing coordinates and descriptions}/>

在子组件中

export default class Marker_List_Start extends Component {
  show = () => {
    this.marker2.showCallout();
  };

  hide = () => {
    this.marker2.hideCallout();
  };

 componentDidUpdate(previousProps,prevState){
if(previousProps.coordinate_start!=this.props.coordinate_start){
    this.hide()
}

 }

  render() {
    const {coordinate_start} = this.props;
    return (
      <>
        <Marker
          ref={ref => {
            this.marker2 = ref;
          }}
          coordinate={coordinate_start}
            //  title={coordinate_start.hole}
            //     description={coordinate_start.description}
          onPress={() => {
            this.show();
          }}>
          <Callout>
            <Text style={{fontWeight: 'bold', color: '#000'}}>
              {coordinate_start.description}
            </Text>
          </Callout>
        </Marker>
      </>
    );
  }
}

赞(0）回复(0）举报 2023-05-06

我来回答

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

2条答案

我这样做了

相关问题

热门标签

最新问答