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

Question

我希望在安装屏幕组件时打开所有标记的所有标注。目前，它仅在单击标记时打开。如何在功能组件中使用 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()

方法。

Answer 1

我就是这样做的

在父组件中

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

Answer 2

最简洁的方法是创建您自己的视图作为标记。 任意 React 视图作为标记

您可以在此处查看标记示例。 这是一个使用的示例here。

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

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

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

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

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

Answer 3

使用React功能组件。

const ExodusMapMarker = ({ branch, key, forwardedRef, selectedBranchName }) => {
  const [calloutVisible, setCalloutVisible] = useState(false);
  const markerRef = useRef(forwardedRef);

  const showCallout = () => {
    markerRef.current?.showCallout();
  };

  const hideCallout = () => {
    markerRef.current?.hideCallout();
  };

  useEffect(() => {
    const selectedBranch = branch?.saccoBranchName === selectedBranchName;
    if (calloutVisible || selectedBranch) {
      hideCallout();
      setTimeout(() => {
        showCallout();
      }, 500);
    }
    console.log('branch', branch);
    console.debug('ref', forwardedRef);
  }, [calloutVisible, branch]);

  const { colors } = useTheme();

  return (
    <Marker
      key={key}
      coordinate={{
        latitude: branch.latitude,
        longitude: branch.longitude,
      }}
      ref={markerRef}
      onPress={() => setCalloutVisible(true)}
      title={branch.saccoBranchName}
      description={branch.telPhone}
    >
      <View
        style={[
          styles.marker,
          {
            backgroundColor: parseHexTransparency(colors.primary, 30),
          },
        ]}
      >
        <Icon name="location-outline" size={20} color={colors.primary} />
      </View>
      <Callout tooltip={true} style={{ width: 'auto' }}>
        <View style={[styles.item, { alignContent: 'center', alignItems: 'center', backgroundColor: '#fff' }]}>
          <CardList
            style={{
              width: 300,
              paddingVertical: 5,
            }}
            onPress={() => {}}
            title={branch.saccoBranchName}
            subtitle={branch.telPhone}
          />
        </View>
      </Callout>
    </Marker>
  );
};


export default Page = () => {
 const  branch = {"latitude": 0.3755, "latitudeDelta": 0.009, "longitude": 32.61123, "longitudeDelta": 0.004, "saccoBranchId": 18, "saccoBranchName": "UPF EXODUS SACCO HQ", "telPhone": "+256 70"};
 return (<View style={{ height: '100%', width: '100%' }}>
              <MapView
                provider={PROVIDER_GOOGLE}
                style={styles.map}
                region={closestBranch}
              >
                  <ExodusMapMarker
                    key={index}
                    branch={branch}
                    selectedBranchName={closestBranch.saccoBranchName}
                    forwardedRef={(markerRef) => (refArray.current[index] = markerRef)}
                  />
              </MapView>
            </View>
  );
}