کتابخانه 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 | 0 | 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 |
از این پراپس برای نمایش انوان آن صفحه استفاده میشود |
6 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام راجع به آ‍‍پدیت جدید ری اکت نویگیشن لطفا یه پست بذارید.ورژن 4 خیلی قرقاطی شده هرکاری میکنی ارور میده.ممنون
سلام امیر عزیز.
به زودی یک آموزش متنی در مورد آموزش react navigation 4 قرار میدیم و میتونی ازش استفاده کنی
مقاله آموزش کار با React navigation 4 منتشر شد
https://reactapp.ir/get-start-react-navigation-4/
عالی دمتون گرم ممنون
سلام آقا مهدی خسته نباشی من ورژن ری اکت نیتوی که استفاده میکنم از 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 هم همینه