ActivityIndicator در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری از ActivityIndicator در ReactNative استفاده کنیم.ActivityIndicator یک loading دایره ای هست که در react ntive مورد استفاده قرار میگیره.این نوع loader اساسا برای نشان دادن یک دایره متجرکه وقتی که اطلاعات از سرور بارگیری میشه.بنابراین وقتی در اپلیکشن داده ها در حال بارگزاری اطلاعات از سرور است ActivityIndicator نمایش داده میشود و وقتی که بارگزاری اطلاعات به پایان رسید،ActivityIndicator دیگر نمایش داده نمیشود.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های AppRegistry , StyleSheet , View , ActivityIndicator , Button در بلاک import
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, ActivityIndicator, Button } from 'react-native'; |
3.ایجاد constructor در کلاس اصلی با پارامتر props .یک state به نام isLoading تعریف میکنیم و مقدار اون رو برابر با true قرار میدیم.isLoading برای نمایش یا پنهان شدن ActivityIndicator مورد استفاده قرار میگیره.وقتی که مقدار isLoading برابر با false باشه ActivityIndicator نمایش داده نمیشه و وقتی که مقدار isLoading برابر با true باشه ActivityIndicator نمایش داده میشه.
|
1 2 3 4 5 6 |
constructor(props) { super(props); this.state = { isLoading: true } } |
4.ایجاد یک تابع به نام ShowHideActivityIndicator . این تابع مقدار isLoading رو تغییر میده.
|
1 2 3 4 5 6 7 8 9 10 11 |
ShowHideActivityIndicator = () =>{ if(this.state.isLoading == true) { this.setState({isLoading: false}) } else { this.setState({isLoading: true}) } } |
5.ایجاد یک استایل به نام MainContainer
|
1 2 3 4 5 6 7 8 9 10 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 }, }); |
6.اضافه کردن View در بلاک render return و فراخوانی استایل MainContainer برای View
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> </View> ); } } |
7.اضافه کردن { } curly brackets درون View.درون این curly brackets مقدار isLoading رو برای نمایش ActivityIndicator چک میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
render() { return ( <View style={styles.MainContainer}> { // Here the ? Question Mark represent the ternary operator. this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null } </View> ); } |
8.اضافه کردن کامپوننت Button درون View و فراخوانی ShowHideActivityIndicator در رویداد onPress این Button
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
render() { return ( <View style={styles.MainContainer}> { // Here the ? Question Mark represent the ternary operator. this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null } <Button title="Hide ActivityIndicator" onPress={this.ShowHideActivityIndicator} /> </View> ); } } |
9.کد کامل برنامه در فایل index.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 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, ActivityIndicator, Button } from 'react-native'; class MainProject extends Component { constructor(props) { super(props); this.state = { isLoading: true } } ShowHideActivityIndicator = () =>{ if(this.state.isLoading == true) { this.setState({isLoading: false}) } else { this.setState({isLoading: true}) } } render() { return ( <View style={styles.MainContainer}> { // Here the ? Question Mark represent the ternary operator. this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null } <Button title="Hide ActivityIndicator" onPress={this.ShowHideActivityIndicator} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 }, }); AppRegistry.registerComponent('MainProject', () => MainProject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید