在 React Native Maps 中的组件上使用方法答案

【问题标题】：Using a method on a component in React Native Maps在 React Native Maps 中的组件上使用方法
【发布时间】：2019-05-08 14:28:13
【问题描述】：

我正在尝试在 React Native Maps 中的标记上使用 animateMarkerToCoordinate 方法。

文档提出以下建议：

componentWillReceiveProps(nextProps) {
  const duration = 500

  if (this.props.coordinate !== nextProps.coordinate) {
    if (Platform.OS === 'android') {
      if (this.marker) {
        this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );
      }
    } else {
      this.state.coordinate.timing({
        ...nextProps.coordinate,
        duration
      }).start();
    }
  }
}

render() {
  return (
    <MapView initialRegion={...}>
      <Marker.Animated
        ref={marker => { this.marker = marker }}
        coordinate={this.state.coordinate}
      />
    </MapView>
  );
}

我试图在我的代码中实现这一点。文档中的代码是用古老的 React 编写的（componentWillReceiveProps 已弃用）

<MapView.Marker.Animated draggable
                coordinate={this.state.playerMarkerPositionFuture}
                title={"Player"}
                description={"Player marker!"}
                image={require('./assets/player_map_icon_small_transparent.png')}
                onDragEnd={(event) => this.setState({ playerMarkerPositionFuture: event.nativeEvent.coordinate })}
                onDragStart={this.movePlayerMarker()}
                />

...

movePlayerMarker = () => {
    this.marker._component.animateMarkerToCoordinate(
      nextProps.coordinate,
      1000
    );
  }

但是我得到了这个错误：

undefined is not an object (evaluating '_this.marker._component')

找到一个更好的例子here。

【问题讨论】：

标签： javascript react-native react-native-maps

【解决方案1】：

从动画标记方法中删除_component。只需编写以下内容

this.marker.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );

而不是

this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );

它会起作用的。

【讨论】：