نمایش Progress bar هنگام نمایش WebPage در react native


سلام ذوستان این آموزش پارت دوم آموزش متنی باز کردن Web Page در react native است .در این آموزش قصد داریم یک اپلیکیشن React Native با استفاده از کامپوننت WebView بسازیم که هنگام بارگزاری وب سایت یک Progress bar در وسط صفحه نمایش داده میشه و بعد از بارگزاری کامل وب سایت این Progress bar مخفی میشه.ما این عملیات ها رو با استفاده از متدهای renderLoading و startInLoadingState انجام میدهیم.
1.ایمپورت کردن کامپوننت های StyleSheet, WebView, Platform و ActivityIndicator در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, WebView, Platform, ActivityIndicator} from 'react-native'; |
2.ایجاد یک تابع به نام ()ActivityIndicatorLoadingView .در این تابع ما کامپوننت ActivityIndicator رو برمیگردونیم.
1 2 3 4 5 6 7 8 9 10 11 |
ActivityIndicatorLoadingView() { return ( <ActivityIndicator color='#009688' size='large' style={styles.ActivityIndicatorStyle} /> ); } |
3.اضافه کردن کامپوننت WebView درون بلاک render’s return.
renderLoading: فراخوانی تابع ()ActivityIndicatorLoadingView که ActivityIndicator رو رندر میکنه.
startInLoadingState:این متد به ما اجازه میده تا loading رو استارت کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <WebView style={styles.WebViewStyle} source={{uri: 'https://google.com'}} javaScriptEnabled={true} domStorageEnabled={true} renderLoading={this.ActivityIndicatorLoadingView} startInLoadingState={true} /> ); } |
4.ایجاد استایل سفارشی برای WebView و ActivityIndicator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const styles = StyleSheet.create( { WebViewStyle: { justifyContent: 'center', alignItems: 'center', flex:1, marginTop: (Platform.OS) === 'ios' ? 20 : }, ActivityIndicatorStyle:{ position: 'absolute', left: , right: , top: , bottom: , alignItems: 'center', justifyContent: 'center' } }); |
5.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, WebView, Platform, ActivityIndicator} from 'react-native'; export default class MainActivity extends Component { ActivityIndicatorLoadingView() { return ( <ActivityIndicator color='#009688' size='large' style={styles.ActivityIndicatorStyle} /> ); } render() { return ( <WebView style={styles.WebViewStyle} source={{uri: 'https://google.com'}} javaScriptEnabled={true} domStorageEnabled={true} renderLoading={this.ActivityIndicatorLoadingView} startInLoadingState={true} /> ); } } const styles = StyleSheet.create( { WebViewStyle: { justifyContent: 'center', alignItems: 'center', flex:1, marginTop: (Platform.OS) === 'ios' ? 20 : }, ActivityIndicatorStyle:{ position: 'absolute', left: , right: , top: , bottom: , alignItems: 'center', justifyContent: 'center' } }); |
دیدگاهتان را بنویسید