有没有什么方法可以让我从另一个页面(React-Native)导航到带有参数的标记？
我有一个页面上有标记的列表，当我单击一个按钮时，我想导航到地图上的标记。
这是list.js的简短版本：
export default class List extends Component {
render() {
const markerOneLocation = {
latitude: 52.587374,
longitude: 5.137634,
latitudeDelta: 0.3,
longitudeDelta: 0.3,
};
const showMarkerOne = () => {
this.props.navigation.navigate('Map',
{initialLocation: markerOneLocation});
};
return (
<Text onPress={this.toggle}>
<Text style={{fontSize: 15}} onPress=
{showMarkerOne} title='Marker1'> Marker 1 </Text>
</Text>
)
}
}这是map.js的简短版本：
export default class Map extends Component {
render() {
return(
<MapView
style={{height: '100%', width: '100%'}}
provider={PROVIDER_GOOGLE}
region={{
latitude: 52.100748,
longitude: 5.646090,
latitudeDelta: 4,
longitudeDelta: 4,
}}
>
<Marker
coordinate={{
latitude: 52.474772,
longitude: 5.197672
}}
anchor={{ x: 0.5, y: 0.5 }}
>
<Image
source={require('../src/
logo_noshadow.png')}
style={{ width: 20, height: 20 }}
/>
</Marker>
</MapView>
)
}
}所以当我点击按钮转到地图时。我希望地图导航到标记并将其显示在标记的中心。
我尝试添加一个markerId作为参数，但我不知道如何将它添加到标记中。
有人能帮我吗？
回答 1
Stack Overflow用户
发布于 2020-12-02 18:54:12
在MapView上，您可以设置引用。在基于钩子的方法中，它看起来类似于：
const mapRef = React.useRef(null);
<MapView
ref={mapRef}
... the rest of your settings
/>我知道你使用的是基于类的方法，但是refs也是可用的。然后，在该引用上，您将拥有一个名为fitToSuppliedMarkers的方法。作为它的第一个参数，它接受一个marker identifiers数组，当它被调用时，它会将地图聚焦到符合所提供列表的标记。
mapRef.current.fitToSuppliedMarkers([ArrayContaingMarkersIdentifiers], {
animated: true,
edgePadding: {
top: 50,
right: 50,
bottom: 50,
left: 50,
},
});https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md#methods
为此，需要为每个<Marker />添加一个唯一的identifier
https://github.com/react-native-maps/react-native-maps/blob/master/docs/marker.md
我知道你使用的是基于类的方法，但是refs也是可用的。
https://stackoverflow.com/questions/65106435
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号