آموزش React Native – کتابخانه react-native-swiper

در این قسمت از آموزش متنی قصد دارم کتابخانه react-native-swiper به شما معرفی و برای اون مثال بزنم. react-native-swiper یک کتابخانه مفید و ساده برای ساخت swiper (اسلایدر) برای دو پلتفرم Android و ios است که این امکان رو برای شما فراهم میکنه در سریع ترین زمان ممکن اسلایدر با ui مورد نظر خودتونو پیاده سازی کنید.

مراحل نصب:

برای نصب این کتابخانه کافیه کامند زیر را در مسیر پروژه خود نصب کنید:

npm i react-native-swiper --save

1	npm i react-native-swiper --save

مثال:

برای استفاده از react-native-swiper کافیه کامپوننت (تگ) swiper از این کتابخانه import

import Swiper from 'react-native-swiper'

1	import Swiper from 'react-native-swiper'

و برای استفاده درون تگ swiper برای هر صفحه اسلایدر از کامپوننت View استفاده میکنیم. به انوان مثال برای نمایش سه صفحه کد زیر را کد نویسی میکنیم:

<Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
 </Swiper>

<Text style={styles.text}>Hello Swiper</Text>

</View>

<Text style={styles.text}>Beautiful</Text>

</View>

<Text style={styles.text}>And simple</Text>

</View>

</Swiper>

و میتونیم برای هر صفحه استایلی در نظر گرفت:

const styles = StyleSheet.create({
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

const styles = StyleSheet.create({

wrapper: {},

slide1: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#9DD6EB'

slide2: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#97CAE5'

slide3: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#92BBD9'

text: {

color: '#fff',

fontSize: 30,

fontWeight: 'bold'

}

})

کد کامل فایل app.js:

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'

import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )
  }
}

AppRegistry.registerComponent('myproject', () => SwiperComponent)

import React, { Component } from 'react'

import { AppRegistry, StyleSheet, Text, View } from 'react-native'

import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({

wrapper: {},

slide1: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#9DD6EB'

slide2: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#97CAE5'

slide3: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#92BBD9'

text: {

color: '#fff',

fontSize: 30,

fontWeight: 'bold'

}

})

export default class SwiperComponent extends Component {

render() {

return (

<Text style={styles.text}>Hello Swiper</Text>

</View>

<Text style={styles.text}>Beautiful</Text>

</View>

<Text style={styles.text}>And simple</Text>

</View>

</Swiper>

)

}

AppRegistry.registerComponent('myproject', () => SwiperComponent)

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

لیست پراپس ها:

پراپس های پایه:

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
horizontal	true	`bool`	اگر مقدار ورودی true باشه فرزندان scroll view در یک ستون به صورت افقی قرار می گیرند
loop	true	`bool`	اگر مقدار ورودی false باشد بیشتر از یک باز تکرار نمیشود
index		`number`	شماره اولین اسلایدی که نمیایش داده میشود
showsButtons	false	`bool`	اگر مقدار ورودی true باشد دکمه های کنترلی نمایش داده میشوند
autoplay	false	`bool`	اگر مقدار ورودی true باشد صفحات اسلایدر بطور خودکار جابه جا میشوند
onIndexChanged	index) => null)	`func`	با تغییر صفحه اسلایدر توسط کاربر تابع داده شده اجرا میشود

استایل های سفارشی :

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
width	–	`number`	در صورت نداشتن مقدار , مقدار آن flex = 1 خواهد بود
height	–	`number`	در صورت نداشتن مقدار , مقدار آن flex = 1 خواهد بود
style	{…}	`style`	دیدن استایل های پیش فرض
containerStyle	{…}	`style`	دیدن استایل های پیش فرض container
loadMinimal	false	`bool`	فقط اسلاید فعلی لود شود
loadMinimalSize	1	`number`	تعیین اندازه`loadMinimal`
loadMinimalLoader	`<ActivityIndicator />`	`element`	نمایش loader سفارشی زمانی که اسلایدر load نشده

پراپس های مربوط به صفحات:

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
showsPagination	true	`bool`	اگر مقدار آن true باشد صفحه بندی قابل مشاهده خواهد بود
paginationStyle	{…}	`style`	استایل های سفارشی و استایل های پیش فرض باهم ادغام میشوند
renderPagination	–	`function`	کنترل کامل نحوه انجام صفحه بندی با استفاده از سه پارامتر (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, .
dot	`<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	`element`	المنت نقطه را به صورت دلخواه سفارشی کنید
activeDot	`<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	`element`	المنت نقطه فعال را به صورت دلخواه سفارشی کنید.
dotStyle	–	`object`	المنت نقطه را به صورت دلخواه سفارشی کنید.
dotColor	–	`string`	تغییر رنگ المنت نقطه ای .
activeDotColor	–	`string`	تغییر رنگ المنت نقطه ای فعال .
activeDotStyle	–	`object`	المنت نقطه را به صورت دلخواه سفارشی کنید.

پراپس های مربوط به اجرای خودکار اسلایدر :

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
autoplay	true	`bool`	اگر مقدار ورودی true باشد اسلایدر بطور خودکار بین صفحات خود جابهجایی انجان میدهد
autoplayTimeout	2.5	`number`	مشخص کنند زمان برای هر انتغال (ثانیه)
autoplayDirection	true	`bool`	کنترل جهت تغییر صفحه.

پراپس های مربوط به دکمه انتقال:

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
showsButtons	true	`bool`	اگر مقدار ورودی true باشد دکمه های کنترل نمایش داده میشوند
buttonWrapperStyle	`{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}`	`style`	استایل های پیشفرض
nextButton	`<Text style={styles.buttonText}>›</Text>`	`element`	سفارشی سازی دکمه رفتن به صفحه بعد
prevButton	`<Text style={styles.buttonText}>‹</Text>`	`element`	سفارشی سازی دکمه رفتن به صفحه قبل

پراپی های مربوط به فرزندان اسلایدر :

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
style	{…}	`style`	استایل های سفارشی و استایل های پیش فرض باهم ادغام میشوند
title	{…}	`element`	از این پراپس برای نمایش انوان آن صفحه استفاده میشود

منبع

مطالب زیر را حتما مطالعه کنید

23 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

sarekhoshgoftar گفت:

می 9, 2020 در 2:05 ب.ظ

سلام ببخشید من اپلیکیشنم رو RTL کردم بعدش این اسلایدر کلا خراب شده

به جای اینکه اون نقطه های پایین و جابجایی بین عکس ها از چپ به راست بشه ، از راست به چپ شده و اون نقطه ها هم به هم ریخته شما برای حل این مشکل چه راه حلی پیشنهاد میکنید ؟

پاسخ
- مهدی گفت:
  
  می 9, 2020 در 3:48 ب.ظ
  
  سلام.میتونید از لینک زیر استفاده کنید
  https://github.com/leecade/react-native-swiper/issues/314
  
  پاسخ
  - sarekhoshgoftar گفت:
    
    می 9, 2020 در 5:48 ب.ظ
    
    بازم من مشکل دارم
    http://s5.picofile.com/file/8396556000/bandicam_2020_05_09_17_37_43_579.png
    این عکس دکمه هاشه که میخوام دکمه اکتیوش از راست شروع بشه
    
    http://s4.picofile.com/file/8396556342/bandicam_2020_05_09_17_39_29_372.png
    اینم کدمه
    
    اینم اگر میشه ببینید کلا همه چیز برعکس اتفاق میوفته
    http://s5.picofile.com/file/8396556584/bandicam_2020_05_09_17_41_00_723.mp4.html
  - مهدی گفت:
    
    می 9, 2020 در 9:10 ب.ظ
    
    الان rtl هست اپیکیشنتون؟
  - sarekhoshgoftar گفت:
    
    می 10, 2020 در 4:32 ق.ظ
    
    بله با دستور I18nManager.forceRTL انجامش دادم
  - مهدی گفت:
    
    می 10, 2020 در 8:14 ق.ظ
    
    نمیدونم والا.باید درست بشه با این ترفند
sarekhoshgoftar گفت:

مارس 31, 2020 در 8:43 ب.ظ

سلام برای نصب این react-native-swiper پکیج ارور میگیرم و نصب نمیشه. چرا ؟
دستور هم اینه : npm i react-native-swiper –save

ارور هم اینه : http://s10.picofile.com/file/8392708942/2.PNG

پاسخ
- امیر حسین حیاتی گفت:
  
  مارس 31, 2020 در 9:50 ب.ظ
  
  سلام برشما.
  از دستور زیر برای پاک کردن نود مودال استفاده
  rm -rf node_modules
  و برای نصب مجدد پکیج ها از دستور
  npm install
  و نهایتا
  npm i react-native-swiper –save
  
  پاسخ
mostafa61 گفت:

مارس 23, 2020 در 3:47 ق.ظ

سلام. مهندس باز هم همون خطا رو میده. چکار کنیم؟

پاسخ
- mostafa61 گفت:
  
  مارس 25, 2020 در 1:34 ق.ظ
  
  ممنون آقا مهدی بابت راهنماییتون. دوستان برای کار کردن کتابخانه Swiper در ورژن های جدید react native این مراحل را انجام دهید.
  ۱- ابتدا کتابخانه react-native-community/viewpager@ را نصب کنید.
  ۲- به فایل index.js در مسیر node_modules\react-native-swiper\src\index.js رفته و خط import ViewPager from ‘@react-native-community/viewpager’ را در قسمت import ها اضافه کنید و کتابخانه ViewPagerAndroid را از قسمت import هاحذف کنید.
  ۳- در همین فایل به جای ViewPagerAndroid عبارت ViewPager را قرار دهید.
  
  پاسخ
  - مهدی گفت:
    
    مارس 25, 2020 در 9:23 ق.ظ
    
    ممنون مصطفی عزیز که راه حل این مشکل رو به اشتراک گذاشتی
  - sarekhoshgoftar گفت:
    
    آوریل 1, 2020 در 3:19 ب.ظ
    
    آقا من این کارا رو انجام دادم ولی باز یه ارور دیگه میده.
    
    http://s10.picofile.com/file/8392784242/2.PNG
  - مهدی گفت:
    
    آوریل 1, 2020 در 4:20 ب.ظ
    
    مراحل زیر رو طی کنید
    ابتدا دستور npm i @react-native-community/viewpager رو اجرا کنید
    برای ios
    pod ‘react-native-viewpager’, :path => ‘../node_modules/@react-native-community/viewpager’ رو به Podfile اضافه کنید سپس
    cd ios
    pod install
    برای Android در فایل android/settings.gradle
    include ‘:@react-native-community_viewpager’
    project(‘:@react-native-community_viewpager’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@react-native-community/viewpager/android’)
    و در فایل
    android/app/build.gradle
    سپس در android/app/src/main/…/MainApplication.java
    در بالای فایل خط کد زیر را قرار دهید
    import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
    و
    @Override
    protected List getPackages() {
    return Arrays.asList(
    new MainReactPackage(),
    new RNCViewPagerPackage()
    );
    مشکلتون باید حل بشه
  - محمدامین گفت:
    
    آوریل 1, 2020 در 5:06 ب.ظ
    
    آقا پس چرا اینارو تو آموزش ساخت اپ دیجی کالا نگفتید
    
    این که اصلا کامل نیست
    
    شما هم خیلی گنگ توضیح دادید
  - مهدی گفت:
    
    آوریل 1, 2020 در 5:37 ب.ظ
    
    دوست عزیز این مشکل به خاطر اپدیت جدید react native به وجود اومده و اگر issue های مربوط به کتابخونه رو چک کنید میبینید که این موضع توسط افراد دیگه بیان شده.وگرنه تا قبل از آپدیت شما نیاز به کار خاصی نداشتید و فقط کافی بوده دستور npm i react-native-swiper –save رو اجرا و از این کتابخانه استفاده کنید
    لینک issue جهت اطلاع
    https://github.com/leecade/react-native-swiper/issues/1153
  - saeedhz67 گفت:
    
    مارس 27, 2020 در 7:55 ب.ظ
    
    با تشکر از اشتراک گذاری شما،
    من همین مراحل رو رفتم ولی خطای RNCViewPager was not found UIManager رو میده
علی گفت:

نوامبر 16, 2019 در 11:34 ق.ظ

سلام آقا مهدی خسته نباشی من ورژن ری اکت نیتوی که استفاده میکنم از 61 هستش اما وقتی از react native swiper استفاده می کنم همچین اروری میده invariant violatio : viewpagerandroid has been removed from react native

پاسخ
- مهدی گفت:
  
  نوامبر 16, 2019 در 12:41 ب.ظ
  
  سلام علی عزیز.
  سلامت باشی.به احتمال خیلی زیاد این کتابخونه از viewpagerandroid استفاده میکنه که این کامپوننت از هسته react native در نسخه 60 حذف شده و باید جداگونه نصب بشه.
  https://github.com/react-native-community/react-native-viewpager
  و دلیل error هم همینه
  
  پاسخ
  - مهدی گفت:
    
    مارس 23, 2020 در 9:24 ق.ظ
    
    issue های کتابخونه رو بررسی کنید
    به احتمال زیاد اونجا راه حل داده باشه
    https://github.com/leecade/react-native-swiper/issues/1108
amir_zack گفت:

سپتامبر 24, 2019 در 1:28 ب.ظ

سلام راجع به آ‍‍پدیت جدید ری اکت نویگیشن لطفا یه پست بذارید.ورژن 4 خیلی قرقاطی شده هرکاری میکنی ارور میده.ممنون

پاسخ
- مهدی گفت:
  
  سپتامبر 24, 2019 در 8:05 ب.ظ
  
  سلام امیر عزیز.
  به زودی یک آموزش متنی در مورد آموزش react navigation 4 قرار میدیم و میتونی ازش استفاده کنی
  
  پاسخ
- مهدی گفت:
  
  سپتامبر 25, 2019 در 7:58 ق.ظ
  
  مقاله آموزش کار با React navigation 4 منتشر شد
  https://reactapp.ir/get-start-react-navigation-4/
  
  پاسخ
  - amir_zack گفت:
    
    سپتامبر 25, 2019 در 9:56 ق.ظ
    
    عالی دمتون گرم ممنون

مثال:

لیست پراپس ها:

پراپس های پایه:

استایل های سفارشی :

پراپس های مربوط به صفحات:

پراپس های مربوط به اجرای خودکار اسلایدر :

پراپس های مربوط به دکمه انتقال:

پراپی های مربوط به فرزندان اسلایدر :

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

23 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ