کتابخانه 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)

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

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

نام پراپس	مقدار پیش فرض	نوع ورودی پراپس	توضیحات
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`	از این پراپس برای نمایش انوان آن صفحه استفاده میشود

منبع

4 دیدگاه

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

amir_zack گفت:

مهر 2, 1398 در 1:28 ب.ظ

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

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

کتابخانه react-native-swiper

مراحل نصب:

مثال:

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

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

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

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

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

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

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

مطالب زیر را حتما بخوانید

شروع سومین سال فعالیت reactapp

شروع کار با React Navigation 4

5 کتابخانه React native برای ساخت انیمیشن

کتابخانه react-native-draggable-flatlist

دانلود و ذخیره عکس در React Native

4 دیدگاه

پاسخی بگذارید لغو پاسخ

ورود

<img class="wp-image-38944 aligncenter" src="https://reactapp.ir/wp-content/uploads/reactnative-1.gif" alt="آموزش فارسی reactnative" width="249" height="440" />

<img class="aligncenter wp-image-38945" src="https://reactapp.ir/wp-content/uploads/reactnativeswiper.gif" alt="" width="289" height="485" />مراحل نصب:

مثال:

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

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

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

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

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

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

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

مطالب زیر را حتما بخوانید

شروع سومین سال فعالیت reactapp

شروع کار با React Navigation 4

5 کتابخانه React native برای ساخت انیمیشن

کتابخانه react-native-draggable-flatlist

دانلود و ذخیره عکس در React Native

4 دیدگاه

پاسخی بگذارید لغو پاسخ

مراحل نصب: