Question

我在代码中使用了活动指示器，并且工作正常。但是现在我想在活动指示器打开时阻止所有UI交互。

Answer 1

是的，您可以实现

第一种方式

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

        return (
             <View />
        )
    }
}

第二种方式

react-native-loading-spinner-overlay 您可以使用上述库在后台ui中使用进度。

Refer Example

您可以在isLoginLoading为true时使用条件渲染，它将显示指示符，否则将渲染您的实际代码，并且您无法在UI中进行交互。

Answer 2

您可以使用pointerEvents

来阻止用户界面

Answer 3

要阻止整个视图的触摸，可以使用pointerevents
Click here以获得完整说明。

用法将是这样

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

Answer 4

如果要在活动指示器工作时阻止所有UI交互，请添加ActivityIndicatior样式，如下例所示：- style={{flex: 1}}

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

Answer 5

为活动指示器添加新的组件，如下所示：

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
)}

Answer 6

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

React Native如何在“活动”指示器打开时阻止所有UI交互？

6 个答案: