آموزش React Native – ایجاد اسلایدر خوشامدگویی
App Intro Slider گروهی از اسلایدها است که زمانی که اپلیکیشن برای اولین بار باز می شود، نمایش داده می شود.App Intro Slider شامل اطلاعات مفیدی در قالب عکس و متن از اپلیکیشن است که کار اصلی اپلیکیشن و مزایایی که دارد را معرفی می کند.در React Native ما با استفاده از کتابخانه react-native-app-intro-slider می توانیم اسلایدر خوشامدگویی برای اپلیکیشن های react native ایجاد کنیم.این کتابخانه بهترین گزینه برای ایجاد App Intro Slider در React Native برای هر دو نسخه Android و Ios است.این کتابخانه شامل ویژگی های بسیار زیادی است که به راحتی قابل سفارشی سازی است.
نکته:Icon های استفاده شده در این آموزش متنی سفید رنگ هستند و در اسکرین هایی با رنگ پس زمینه سفید،نمایش داده نخواهند شد.
1. دایرکتوری پروژه react native خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه react-native-app-intro-slider اجرا کنید:
|
1 |
npm install react-native-app-intro-slider --save |
شما باید همچنین دستور react-native link رو اجرا کنید زیرا این کتابخانه با کدهای pure react native JavaScript توسعه داده شده است.
2.فایل App.js پروژه را بازکنید و کامپوننت های StyleSheet, View, Text و Platform رو ایمپورت کنید.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform } from 'react-native'; |
3.ایمپورت کامپوننت AppIntroSlider از کتابخانه react-native-app-intro-slider.
|
1 |
import AppIntroSlider from 'react-native-app-intro-slider'; |
4.تعریف ()constructor برای کلاس App. درون سازنده ما یک state به نام show_Main_App با نوع داده ای boolean تعریف میکنیم و مقدار پیش فرض آن را false قرار می دهیم.این state برای مدیریت نمایش App intro slider مورد استفاده قرار می گیرد.اگر مقدار این state برابر true باشد صفحه اصلی برنامه به کاربر نمایش داده می شود و در غیر اینصورت صفحه خوشامدگویی برنامه به کاربر نمایش داده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
render() { if (this.state.show_Main_App) { return ( <View style={styles.MainContainer}> <Text style={{ textAlign: 'center', fontSize: 20, color: '#000' }}> This is your main App screen After App Intro. </Text> </View> ); } else { return ( <AppIntroSlider slides={slides} onDone={this.on_Done_all_slides} showSkipButton={true} onSkip={this.on_Skip_slides} /> ); } } |
5.ایجاد استایل
|
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({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', padding: 20 }, title: { fontSize: 26, color: '#fff', fontWeight: 'bold', textAlign: 'center', marginTop: 20, }, text: { color: '#fff', fontSize: 20, }, image: { width: 200, height: 200, resizeMode: 'contain' } }); |
6.تعریف یک آرایه از نوع const با نام slides.این آرایه شامل همگی اطلاعات درمورد اسلایدها است.ما این آرایه را بعد از کدهای ایجاد استایل تعریف می کنیم.زیرا اگر ما آرایه را قبل از استایل ها تعریف کنیم، استایل ها به درستی اعمال نخواهند شد.
key :باید برای هر اسلاید منحصربه فرد باشد.
title : عنوان هر اسلاید.
text : توضیحات مربوط به هر اسلاید.
image: عکس نمایش داده شده در هر اسلاید.
titleStyle: فراخوانی استایل مربوط به عنوان هر اسلاید.
textStyle: فراخوانی استایل مربوط به توضیحات هر اسلاید.
imageStyle: فراخوانی استایل مربوط به عکس هر اسلاید.
backgroundColor :رنگ پس زمینه هر اسلاید با فرمت HEX
|
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
const slides = [ { key: 'k1', title: 'Event Organizer', text: 'Best Event Organizers', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/calendar.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF1744', }, { key: 'k2', title: 'Weather Reports', text: 'Latest Weather Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/cloud.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#D500F9', }, { key: 'k3', title: 'Technology Informations', text: 'Latest Technology Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/computer.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#2979FF', }, { key: 'k4', title: 'Flight Bookings', text: ' Best Deals on Flights', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/flight.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#1DE9B6', }, { key: 'k5', title: 'Restaurant Bookings', text: ' 20% off on first Restaurant booking', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/restaurants.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF3D00', }, ]; |
7. کد کامل برنامه در فایل 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform } from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; export default class App extends Component { constructor(props) { super(props); this.state = { show_Main_App: false }; } on_Done_all_slides = () => { this.setState({ show_Main_App: true }); }; on_Skip_slides = () => { this.setState({ show_Main_App: true }); }; render() { if (this.state.show_Main_App) { return ( <View style={styles.MainContainer}> <Text style={{ textAlign: 'center', fontSize: 20, color: '#000' }}> This is your main App screen After App Intro. </Text> </View> ); } else { return ( <AppIntroSlider slides={slides} onDone={this.on_Done_all_slides} showSkipButton={true} onSkip={this.on_Skip_slides} /> ); } } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', padding: 20 }, title: { fontSize: 26, color: '#fff', fontWeight: 'bold', textAlign: 'center', marginTop: 20, }, text: { color: '#fff', fontSize: 20, }, image: { width: 200, height: 200, resizeMode: 'contain' } }); const slides = [ { key: 'k1', title: 'Event Organizer', text: 'Best Event Organizers', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/calendar.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF1744', }, { key: 'k2', title: 'Weather Reports', text: 'Latest Weather Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/cloud.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#D500F9', }, { key: 'k3', title: 'Technology Informations', text: 'Latest Technology Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/computer.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#2979FF', }, { key: 'k4', title: 'Flight Bookings', text: ' Best Deals on Flights', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/flight.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#1DE9B6', }, { key: 'k5', title: 'Restaurant Bookings', text: ' 20% off on first Restaurant booking', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/restaurants.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF3D00', }, ]; |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید