Блог

Я использую индикатор активности в своем коде, и он работает нормально. но теперь я хочу заблокировать все взаимодействия с пользовательским интерфейсом при открытии индикатора активности.

Вы можете заблокировать пользовательский интерфейс с помощью PointerEvents

Для блокировки касаний всего представления мы можем использовать pointerevents

Нажмите здесь для полного объяснения.

Использование будет таким

 {loading amp;amp; <View style={styles.spinner} pointerEvents={'none'}>
        <ActivityIndicator/>
    </View>
}
  

Создайте новый компонент для индикатора активности, как показано ниже:

 import React, { Component } from 'react';

import { View, ActivityIndicator,Dimensions } from 'react-native';

export default class Loader extends Component {
    render() {
        const { isVisible } = this.props;
        return (
            isVisible ?
                <View style={{
                backgroundColor: 'transparent',
                position: 'absolute',
                height: Dimensions.get('window').height,
                width:  Dimensions.get('window').width,
                justifyContent: 'center',
                alignItems: 'center'}} >
                    <ActivityIndicator size="small" color={'red'} />
                </View> : null
        );
    }
} 
  

Добавьте компонент, как показано ниже:

 import { Loader } from 'path of component';


render(){
  return(
 <View>
     ...
     ...
      //put loader compponent ar the bottom
     <Loader isVisible={isLoginLoading: true OR false} />
 </View
)}
  

Если вы хотите заблокировать все взаимодействия с пользовательским интерфейсом во время работы индикатора активности, добавьте стиль ActivityIndicatior .Используйте это, как показано ниже в примере:- style={{flex: 1}}


 render() {
	return (
		<View style={{ backgroundColor: 'white' }}>
		<ImageBackground source={AppImages.welcome.source} style={{ width: '100%', height: '100%' }}>
		{!!this.state.data amp;amp;<View style={styles.container}>{this.renderContent()}</View>}
		{!this.state.data amp;amp;this.renderHUD()}
		</ImageBackground>
	  </View>
		);
	}
  
  renderHUD() {
     return <ActivityIndicator size="large" color="#ffffff"
           style={{justifyContent: 'flex-end',
		   alignItems: 'center',
		   flex: 1,
		   marginBottom: '12.4%'}} />;
		
	}  

 render() {
    const RenderView = Loading ? <ActivityIndicator style={{flex:1}}/> : <ScreenView/>;
    return RenderView;
}
  

Да, вы можете добиться

Первый способ

 class App extends Component {
    render() {
        if(this.props.isLoginLoading){
            return(
                <ActivityIndicatorMode/>
            )
        }

        return (
             <View />
        )
    }
}
  

Второй способ

react-native-loading-spinner-overlay вы можете использовать вышеуказанную библиотеку для использования прогресса с фоновым пользовательским интерфейсом.

См. Пример

вы можете использовать кондиционирование рендеринга, когда у isLoginLoading вас значение true, он покажет индикатор, в противном случае отобразит ваш фактический код, и вы не сможете взаимодействовать в пользовательском интерфейсе.