نمایش Progress bar هنگام scroll در react native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری یک Progress bar هنگام scroll در React Native نمایش بدیم.Horizontal Progress bar یکی از کامپوننت های پرکاربرد در React Native است.این کامپوننت برای نمایش میزان پیشرفت یک عملیات از طریق پر کردن یک نوار با یک انیمیشن smooth مورد استفاده قرار میگیرد.در واقع در این آموزش من قصد دارم نحوه ساخت یک Text Reader رو آموزش بدم تا کاربر بر اساس Progress bar متوجه بشه چند درصد از متن رو خونده.حالتی رو در نظر بگیرید که شما در حال نوشتن یک اپلیکیشن کتابخوان مثل فیدیبو یا طاقچه هستید.اینکه به کاربر نشون بدید چند درصد یک کتاب یا متن رو خونده میتونه یک قابلیت جذاب باشه.در ادامه با من همراه باشید تا نحوه ساختن این قابلیت جذاب رو به شما آموزش بدم.
1.ایمپورت کردن کامپوننت های StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS و ScrollView در پروژه.
|
1 2 3 4 5 6 7 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native';t, { Component } import React, { Component } from 'react'; import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native'; |
2.ایجاد ()constructor و تعریف یک state به نام progress_count و دو متغیر به نام های scrollView_height و scrollViewContent_height.
progress_count: برای نمایش درصد پیشرفت در Progress bar استفاده میشود.
scrollView_height : برای نگه داری مقدار ارتفاع ScrollView مورد استفاده قرار میگیرد.
scrollViewContent_height: برای نگه داشتن ارتفاع محتوا داخل ScrollView مورد استفاده قرار میگیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
constructor() { super(); this.state = { progress_count: 0 } this.scrollView_height = 0; this.scrollViewContent_height = 0; } |
3.ایجاد یک تابع به نام ()UpdateProgressBar با پارامتر progress .این تابع به صورت اتومات میزان پیشرفت رو بر اساس ارتفاع درونی و بیرونی scrollview محاسبه میکند.بعد از محاسبه میزان پیشرفت،این مقدار رو درون progress_count دخیره میکند.
|
1 2 3 4 5 6 |
UpdateProgressBar = (progress) => { this.setState({ progress_count: Math.abs( progress.nativeEvent.contentOffset.y / ( this.scrollViewContent_height - this.scrollView_height ))}); } |
4.اضافه کردن View در بلاک render’s return.درون این کامپوننت ScrollView و Progress bar قرار میگیرند.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return( <View style = { styles.MainContainer }> </View> ); } |
5.اضافه کردن کامپوننت ScrollView درون View اصلی.
contentContainerStyle : از این Prop برای استایل دهی محتوای دورن ScrollView استفاده میشود.
onContentSizeChange : این Prop بصورت خودکار زمانی که scroll انجام میشود،فراخوانی میشه.برای کسب اطلاعات بیشتر در مورد این Prop میتونید به این لینک مراجعه کنید.
onScroll : بصورت خودکار زمانی که scroll به اندازه یک واحد اتفاق می افتد.فراخوانی میشه.
onLayout : این prop به onContentSizeChange متصل شده است.
scrollEventThrottle : این prop کنترل میکند که چطوری scroll event به کار گرفته شود(بر حسب میلی ثانیه).
|
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 |
render() { return( <View style = { styles.MainContainer }> <ScrollView contentContainerStyle = {{ paddingBottom: 40 }} onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }} onScroll = { this.UpdateProgressBar } onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )} scrollEventThrottle = { 12 } > <Text style = { styles.All_Text }> Hello Guys, Welcome to ReactNativeCode.com, This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. Hello Guys, Welcome to ReactNativeCode.com. This is some sample Text for this project. </Text> </ScrollView> </View> ); |
6.اضافه کردن یک View درون View اصلی و قرار دادن کامپوننت Progress bar درون این View.
|
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 |
render() { return( <View style = { styles.MainContainer }> <ScrollView contentContainerStyle = {{ paddingBottom: 40 }} onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }} onScroll = { this.UpdateProgressBar } onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )} scrollEventThrottle = { 12 } > <Text style = { styles.All_Text }> Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. </Text> </ScrollView> <View style = { styles.ProgressBar_HolderView }> { ( Platform.OS === 'android' ) ? ( <ProgressBarAndroid styleAttr = "Horizontal" progress = { this.state.progress_count } color = "#fff" indeterminate = { false } style = {{ width: '100%' }} /> ) : ( <ProgressViewIOS progressTintColor = "#fff" style = {{ width: '100%' }} progress = { this.state.progress_count } /> ) } <Text style = { styles.Percentage }> { Math.round( this.state.progress_count * 100 ) }% </Text> </View> </View> ); } |
7.ایجاد استایل سفارشی.
|
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 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0 }, All_Text: { fontSize: 21, color: '#000', padding: 20, textAlign: 'left' }, ProgressBar_HolderView: { justifyContent: 'center', flexDirection: 'row', alignItems: 'center', position: 'absolute', left: 0, right: 0, bottom: 0, paddingLeft: 20, paddingRight: 50, backgroundColor: '#009688', height: 50, }, Percentage: { position: 'absolute', right: 6, fontWeight: 'bold', color: 'white' }, }); |
کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Text, ProgressBarAndroid, ProgressViewIOS, ScrollView } from 'react-native'; export default class Project extends Component<{}> { constructor() { super(); this.state = { progress_count: 0 } this.scrollView_height = 0; this.scrollViewContent_height = 0; } UpdateProgressBar = (progress) => { this.setState({ progress_count: Math.abs( progress.nativeEvent.contentOffset.y / ( this.scrollViewContent_height - this.scrollView_height ))}); } render() { return( <View style = { styles.MainContainer }> <ScrollView contentContainerStyle = {{ paddingBottom: 40 }} onContentSizeChange = {( width, height ) => { this.scrollViewContent_height = height }} onScroll = { this.UpdateProgressBar } onLayout = {(event) => this.scrollView_height = ( event.nativeEvent.layout.height )} scrollEventThrottle = { 12 } > <Text style = { styles.All_Text }> Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. Hello Guys, Welcome to reactapp.ir, This is some sample Text for this project. </Text> </ScrollView> <View style = { styles.ProgressBar_HolderView }> { ( Platform.OS === 'android' ) ? ( <ProgressBarAndroid styleAttr = "Horizontal" progress = { this.state.progress_count } color = "#fff" indeterminate = { false } style = {{ width: '100%' }} /> ) : ( <ProgressViewIOS progressTintColor = "#fff" style = {{ width: '100%' }} progress = { this.state.progress_count } /> ) } <Text style = { styles.Percentage }> { Math.round( this.state.progress_count * 100 ) }% </Text> </View> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0 }, All_Text: { fontSize: 21, color: '#000', padding: 20, textAlign: 'left' }, ProgressBar_HolderView: { justifyContent: 'center', flexDirection: 'row', alignItems: 'center', position: 'absolute', left: 0, right: 0, bottom: 0, paddingLeft: 20, paddingRight: 50, backgroundColor: '#009688', height: 50, }, Percentage: { position: 'absolute', right: 6, fontWeight: 'bold', color: 'white' }, }); |
پاسخی بگذارید