react-native - React Native如何在活动指示器打开时阻止所有UI交互?

61 4
时间: 原作者:

84 1

是的,你可以

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

isLoginLoading 为 true 时,可以使用调用呈现,否则呈现实际代码,不能在UI中交互。

70 1

你可以使用 pointerEvents 阻止 UI 。

原作者:
123 0

对于整个视图的阻塞,我们可以使用 pointerevents
单击这里以获得完整解释。

使用将类似于


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

为以下活动指示器创建新组件:

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