有什么方法可以让我从另一个页面(React Native)导航到带有params的标记吗

Question

我在页面上有一个带有标记的列表，当我点击按钮时，我想导航到地图上的标记。

这是列表.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>
)
}
}

所以当我点击按钮进入地图时。我想让地图导航到标记并显示在它的中心。

我尝试添加一个标记ID作为参数，但我不知道如何将其添加到标记中。

有人能帮我吗？

Answer 1

在MapView上，您可以设置引用。在一种基于钩子的方法中，它看起来像：

const mapRef = React.useRef(null);
<MapView
ref={mapRef}
... the rest of your settings
/>

我看到你使用了一种基于类的方法，但是引用也在那里。然后在该引用中，您将获得一个名为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

我看到你使用了一种基于类的方法，但是引用也在那里。