在react-native-maps中显示标记的标注

Question

当我有接送地址和下送地址时，我想显示标记的标注。我在main.js的componentDidUpdate中使用方法.showCallout（）。当我将其与特定坐标标记一起使用时，它可以工作。但是，当我尝试显示标记的标注是其坐标是从parent（main.js）传递时，这是行不通的。
我的代码有2种情况：

---

案例1：特定坐标标记

MapContainer.js

showCallout = () => {
    this.pickUpMarker.showCallout();
};
render() {
    return (
      <View style={styles.mapViewContainer}>
        {
          this.props.region.latitude &&
          <MapView
            style={styles.mapView}
            provider={MapView.PROVIDER_GOOGLE}
            initialRegion={this.props.region}
            showsUserLocation={true}
            ref={ref => { this.map = ref; }}
            customMapStyle={customStyle}
          >

            <MapView.Marker
              pinColor="green"
              ref={ref => this.pickUpMarker = ref}
              image={marker}
              coordinate={{
                latitude:  20.966918,
                longitude: 105.770016
              }}

            >
              <MapView.Callout tooltip={true}>
                <View style={styles.title}>
                  <Text numberOfLines={1} style={styles.titleText}>Callout</Text>
                  <View style={styles.titleIcon}>
                    <Icon.FontAwesome name="chevron-right" size={14} color={Colors.gray200}/>
                  </View>
                </View>
              </MapView.Callout>
            </MapView.Marker>
            </MapView>
        }
      </View>
       );
  }
}

---

案例2：从main.js传递坐标

MapContainer.js

showCallout = () => {
    this.pickUpMarker.showCallout();
};
render() {
    return (
      <View style={styles.mapViewContainer}>
        {
          this.props.region.latitude &&
          <MapView
            style={styles.mapView}
            provider={MapView.PROVIDER_GOOGLE}
            initialRegion={this.props.region}
            showsUserLocation={true}
            ref={ref => { this.map = ref; }}
            customMapStyle={customStyle}
          >

            {
              this.props.bookingInfo.pickUp.location.latitude!=='' ?
                <MapView.Marker
                  coordinate={this.props.bookingInfo.pickUp.location}
                  image={marker}
                  ref={ref => this.pickUpMarker = ref}
                >
                  <MapView.Callout tooltip={true}>
                    <View style={styles.title}>
                      <Text numberOfLines={1} style={styles.titleText}>{this.props.bookingInfo.pickUp.desc}</Text>
                      <View style={styles.titleIcon}>
                        <Icon.FontAwesome name="chevron-right" size={14} color={Colors.gray200}/>
                      </View>
                    </View>
                  </MapView.Callout>
                </MapView.Marker>
                : null
            }
            </MapView>
        }
      </View>
       );
  }
}

---

main.js

...
componentDidUpdate = async (prevProps, prevState) => {
    if(this.state.booking.pickUp.placeID && this.state.booking.dropOff.placeID
      && ((this.state.booking.pickUp.placeID!==prevState.booking.pickUp.placeID)
        || (this.state.booking.dropOff.placeID!==prevState.booking.dropOff.placeID))
    ) {
      //Show callout when have pick up and drop off address
      this.mapContainer.showCallout()
    }
  };
...
render() {
    return (
      <View style={styles.container}>
        <MapContainer
          region={this.state.region}
          coords={this.state.coordinates}
          bookingInfo={this.state.booking}
          nearByDrivers={this.state.nearByDrivers}
          ref={ref => this.mapContainer = ref}
        />
        ...
      </View>
  )
}

---

如果我的英语让您感到困惑，请评论您的问题，我将尝试详细解释。
谢谢。