آموزش استفاده از 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 مون داره و با فشردن هر کدوم از نقاطی که مشخص کردیم باعث میشه آیتم هامون هم جابجا شن 🙂

نتیجه کار :