![آموزش استفاده از maps و carousel برای یافتن مکان مورد نظر](https://easybuild.ir/wp-content/uploads/2023/08/react-native-maps-780x470.jpg)
آموزش استفاده از maps و carousel برای یافتن مکان مورد نظر
سلام به همه ی شما همراهان همیشگی ایزی بیلد 🙂
امروز قصد داریم تا یک آموزش کاربردی و مفید داشته باشیم که ب احتمال زیاد توی پروژه هاتون خیلی به کار میاد. همونطور که از عنوان مقالمون مشخصه میخوایم با استفاده از maps و carousel یه پروژه بسازیم. خب بریم سراغ شروع کار.
اولین قدم ساخت پروژه react native خودمون با استفاده از دستور زیره
npx react-native init YourProjectName
بعد از اینکه پروژه خودمون رو ساختیم میریم که کتابخونه های مورد نیاز رو هم اضافه کنیم.
به سراغ مستندات react native maps میریم و دستور زیر رو برای نصب توی ترمینال پروژه تایپ میکنیم
npm install react-native-maps --save-exact
برای انجام کانفیگ مربوط به کتابخونه هم میتونید به این لینک مراجعه کنید.
خب مرحله بعدی نصب کتابخونه react native snap carousel با دستور زیر هست
npm install --save react-native-snap-carousel
بعد از اینکه کتابخونه های مورد نظرمونو نصب کردیم میریم سراغ کد هامون
state = {
markers : [],
coordinates: [
{name: 'شهروند',
latitude: 37.8025259,
longitude: -122.4351431,
img: require('../../assets/images/banner1.jpg'),
text: 'فروشگاه شهروند',
loc: 'تهران - ایران',
des: 'خوراک و اغذیه',
},
{name: 'افق کوروش', latitude: 37.7896386, longitude: -122.421646,img: require('../../assets/images/banner1.jpg'),
text: 'فروشگاه افق کوروش',
loc: 'تهران - ایران',
des: 'خوراک و اغذیه',},
{name: 'جانبازان', latitude: 37.7665248, longitude: -122.4161628,img: require('../../assets/images/banner1.jpg'),
text: 'فروشگاه جانبازان',
loc: 'تهران - ایران',
des: 'خوراک و اغذیه',},
{name: 'رفاه', latitude: 37.7734153, longitude: -122.4577787,img: require('../../assets/images/banner1.jpg'),
text: 'فروشگاه رفاه',
loc: 'تهران - ایران',
des: 'خوراک و اغذیه',},
{name: 'جانبو', latitude: 37.7948605, longitude: -122.4596065,img: require('../../assets/images/banner1.jpg'),
text: 'فروشگاه جانبو',
loc: 'تهران - ایران',
des: 'خوراک و اغذیه',},
]
}
خب ما بطور مثال اطلاعات مکانی، نام،و دسته بندی چند تا فروشگاه رو داخل state تعریف کردیم
مرحله بعد میریم تا کامپوننت map و carousel رو داخل return قرار بدیم
با استفاده از marker , callout که داخل mapview تعریف کردیم میتونیم که یک موقعیت مکانی رو نشون بدیم که این موقعیت مکانی میتونه موقعیت خود کاربر هم باشه.
دستور .map به ما اجازه میده تا مشخصات فروشگاه هایی که داخل state تعریف کردیم همگی نمایش داده شن.
import MapView, {Callout, Marker, Polygon, PROVIDER_GOOGLE} from "react-native-maps";
this._map = map}
style={styles.map}
provider={PROVIDER_GOOGLE}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.09,
longitudeDelta: 0.035,
}}
>
hiiiiiiiiiiii
{this.state.coordinates.map((marker,index) => (
this._onMarkerPressed(marker , index)}
ref = {ref => this.state.markers[index] = ref}
coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
title={marker.name}>
{marker.name}
)
)}
this.carousel = ref}
data={this.state.coordinates}
sliderWidth={wp(100)}
itemWidth={wp(83)}
renderItem={this._renderItem}
onSnapToItem={(index) => this._onCarouselItemChange(index)}
removeClippedSubviews = {false}
/>
خب حالا میریم سراغ متد های carousel
renderItem : آیتم هایی که قصد داریم به شکل carousel نمایش داده شوند را رندر میکند
onSnapItem : این متدی هستش که باعث میشه با تغییر آیتم هامون چه اتفاقی رخ بده که کد هاشو در پایین قرار دادم که بعد از متد render مون قرار داده میشن
_renderItem({item, index}) {
return (
{item.text}
{item.des}
{item.loc}
)
}
_onCarouselItemChange = (index) => {
let location = this.state.coordinates[index]
this._map.animateToRegion({
latitude : location.latitude,
longitude : location.longitude,
latitudeDelta : 0.09,
longitudeDelta : 0.035
})
this.state.markers[index].showCallout()
}
_onMarkerPressed = (location , index) => {
this._map.animateToRegion({
latitude : location.latitude,
longitude : location.longitude,
latitudeDelta : 0.09,
longitudeDelta : 0.035
})
this.carousel.snapToItem(index)
}
onMarkedPress هم رابطه مستقیم با carousel مون داره و با فشردن هر کدوم از نقاطی که مشخص کردیم باعث میشه آیتم هامون هم جابجا شن 🙂
نتیجه کار :