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


)}



...