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

در این قسمت از آموزش متنی قصد دارم کتابخانه react-native-swiper به شما معرفی و برای اون مثال بزنم. react-native-swiper یک کتابخانه مفید و ساده برای ساخت swiper (اسلایدر) برای دو پلتفرم Android و ios است که این امکان رو برای شما فراهم میکنه در سریع ترین زمان ممکن اسلایدر با ui مورد نظر خودتونو پیاده سازی کنید.
مراحل نصب:
برای نصب این کتابخانه کافیه کامند زیر را در مسیر پروژه خود نصب کنید:
1 |
npm i react-native-swiper --save |
مثال:
برای استفاده از react-native-swiper کافیه کامپوننت (تگ) swiper از این کتابخانه import
1 |
import Swiper from 'react-native-swiper' |
و برای استفاده درون تگ swiper برای هر صفحه اسلایدر از کامپوننت View استفاده میکنیم. به انوان مثال برای نمایش سه صفحه کد زیر را کد نویسی میکنیم:
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
و میتونیم برای هر صفحه استایلی در نظر گرفت:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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) |
لیست پراپس ها:
پراپس های پایه:
نام پراپس | مقدار پیش فرض | نوع ورودی پراپس | توضیحات |
---|---|---|---|
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 |
از این پراپس برای نمایش انوان آن صفحه استفاده میشود |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
گاهی اوقات هنگام توسعه برنامهها با React Native، در موقعیتی...
تفاوت توسعه برنامه های android و ios
هر توسعه دهنده ای زمانی که می خواهد یکی از...
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
Flipper یک ابزار debugging توسعه داده شده توسط فیسبوک است...
نمایش PDF در react native
pdf یکی از پرکاربردترین و محبوب ترین فرمت های document...
استفاده از Mapbox در react native (ری اکت نیتیو)
Mapbox یکی از بهترین جایگزین های توصیه شده برای Google...
نمایش عکس های گوشی در react native (ری اکت نیتیو)
در این نوشته تصمیم گرفتم در مورد نمایش عکس های...
23 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام ببخشید من اپلیکیشنم رو RTL کردم بعدش این اسلایدر کلا خراب شده
به جای اینکه اون نقطه های پایین و جابجایی بین عکس ها از چپ به راست بشه ، از راست به چپ شده و اون نقطه ها هم به هم ریخته شما برای حل این مشکل چه راه حلی پیشنهاد میکنید ؟
سلام.میتونید از لینک زیر استفاده کنید
https://github.com/leecade/react-native-swiper/issues/314
بازم من مشکل دارم
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
الان rtl هست اپیکیشنتون؟
بله با دستور I18nManager.forceRTL انجامش دادم
نمیدونم والا.باید درست بشه با این ترفند
سلام برای نصب این react-native-swiper پکیج ارور میگیرم و نصب نمیشه. چرا ؟
دستور هم اینه : npm i react-native-swiper –save
ارور هم اینه : http://s10.picofile.com/file/8392708942/2.PNG
سلام برشما.
از دستور زیر برای پاک کردن نود مودال استفاده
rm -rf node_modules
و برای نصب مجدد پکیج ها از دستور
npm install
و نهایتا
npm i react-native-swiper –save
سلام. مهندس باز هم همون خطا رو میده. چکار کنیم؟
ممنون آقا مهدی بابت راهنماییتون. دوستان برای کار کردن کتابخانه 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 را قرار دهید.
ممنون مصطفی عزیز که راه حل این مشکل رو به اشتراک گذاشتی
آقا من این کارا رو انجام دادم ولی باز یه ارور دیگه میده.
http://s10.picofile.com/file/8392784242/2.PNG
مراحل زیر رو طی کنید getPackages() { asList(
ابتدا دستور 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
return Arrays.
new MainReactPackage(),
new RNCViewPagerPackage()
);
مشکلتون باید حل بشه
آقا پس چرا اینارو تو آموزش ساخت اپ دیجی کالا نگفتید
این که اصلا کامل نیست
شما هم خیلی گنگ توضیح دادید
دوست عزیز این مشکل به خاطر اپدیت جدید react native به وجود اومده و اگر issue های مربوط به کتابخونه رو چک کنید میبینید که این موضع توسط افراد دیگه بیان شده.وگرنه تا قبل از آپدیت شما نیاز به کار خاصی نداشتید و فقط کافی بوده دستور npm i react-native-swiper –save رو اجرا و از این کتابخانه استفاده کنید
لینک issue جهت اطلاع
https://github.com/leecade/react-native-swiper/issues/1153
با تشکر از اشتراک گذاری شما،
من همین مراحل رو رفتم ولی خطای RNCViewPager was not found UIManager رو میده
سلام آقا مهدی خسته نباشی من ورژن ری اکت نیتوی که استفاده میکنم از 61 هستش اما وقتی از react native swiper استفاده می کنم همچین اروری میده invariant violatio : viewpagerandroid has been removed from react native
سلام علی عزیز.
سلامت باشی.به احتمال خیلی زیاد این کتابخونه از viewpagerandroid استفاده میکنه که این کامپوننت از هسته react native در نسخه 60 حذف شده و باید جداگونه نصب بشه.
https://github.com/react-native-community/react-native-viewpager
و دلیل error هم همینه
issue های کتابخونه رو بررسی کنید
به احتمال زیاد اونجا راه حل داده باشه
https://github.com/leecade/react-native-swiper/issues/1108
سلام راجع به آپدیت جدید ری اکت نویگیشن لطفا یه پست بذارید.ورژن 4 خیلی قرقاطی شده هرکاری میکنی ارور میده.ممنون
سلام امیر عزیز.
به زودی یک آموزش متنی در مورد آموزش react navigation 4 قرار میدیم و میتونی ازش استفاده کنی
مقاله آموزش کار با React navigation 4 منتشر شد
https://reactapp.ir/get-start-react-navigation-4/
عالی دمتون گرم ممنون