在 React Native Maps 中的组件上使用方法
Using a method on a component in React Native Maps
我正在尝试在 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。
在这里找到了一个更好的例子:
https://github.com/react-native-community/react-native-maps/blob/master/example/examples/AnimatedMarkers.js
从动画标记中删除 _component method.Just 写入以下内容
this.marker.animateMarkerToCoordinate(
nextProps.coordinate,
duration
);
而不是
this.marker._component.animateMarkerToCoordinate(
nextProps.coordinate,
duration
);
它会起作用。
我正在尝试在 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。
在这里找到了一个更好的例子: https://github.com/react-native-community/react-native-maps/blob/master/example/examples/AnimatedMarkers.js
从动画标记中删除 _component method.Just 写入以下内容
this.marker.animateMarkerToCoordinate(
nextProps.coordinate,
duration
);
而不是
this.marker._component.animateMarkerToCoordinate(
nextProps.coordinate,
duration
);
它会起作用。