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

سلام ذوستان این آموزش پارت دوم آموزش متنی باز کردن Web Page در react native است .در این آموزش قصد داریم یک اپلیکیشن React Native با استفاده از کامپوننت WebView بسازیم که هنگام بارگزاری وب سایت یک Progress bar در وسط صفحه نمایش داده میشه و بعد از بارگزاری کامل وب سایت این Progress bar مخفی میشه.ما این عملیات ها رو با استفاده از متدهای renderLoading و startInLoadingState انجام میدهیم.

1.ایمپورت کردن کامپوننت های StyleSheet, WebView, Platform و ActivityIndicator در پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, WebView, Platform, ActivityIndicator} from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, WebView, Platform, ActivityIndicator} from 'react-native';

2.ایجاد یک تابع به نام ()ActivityIndicatorLoadingView .در این تابع ما کامپوننت ActivityIndicator رو برمیگردونیم.

ActivityIndicatorLoadingView() {
    
    return (
 
      <ActivityIndicator
        color='#009688'
        size='large'
        style={styles.ActivityIndicatorStyle}
      />
    );
  }

ActivityIndicatorLoadingView() {

return (

<ActivityIndicator

color='#009688'

size='large'

style={styles.ActivityIndicatorStyle}

);

}

3.اضافه کردن کامپوننت WebView درون بلاک render’s return.

renderLoading: فراخوانی تابع ()ActivityIndicatorLoadingView که ActivityIndicator رو رندر میکنه.

startInLoadingState:این متد به ما اجازه میده تا loading رو استارت کنیم.

render() {
       
       return (
    
         <WebView 
         style={styles.WebViewStyle} 
         source={{uri: 'https://google.com'}} 
         javaScriptEnabled={true}
         domStorageEnabled={true}
         renderLoading={this.ActivityIndicatorLoadingView} 
         startInLoadingState={true}  
         />
   
       );
     }

render() {

return (

<WebView

style={styles.WebViewStyle}

source={{uri: 'https://google.com'}}

javaScriptEnabled={true}

domStorageEnabled={true}

renderLoading={this.ActivityIndicatorLoadingView}

startInLoadingState={true}

);

}

4.ایجاد استایل سفارشی برای WebView و ActivityIndicator.

const styles = StyleSheet.create(
{
 
WebViewStyle:
{
   justifyContent: 'center',
   alignItems: 'center',
   flex:1,
   marginTop: (Platform.OS) === 'ios' ? 20 : 0
},
 
ActivityIndicatorStyle:{
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  
}
});

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.

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/deep-linking-your-react-native-app/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/deep-linking-in-react-native-300x150.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">Deep Linking در React Native</div></div></div><div class="ctaButton"></div></div></a></div> 
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 : 0
},
 
ActivityIndicatorStyle:{
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  
}
});

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'

}

});

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ