如何隐藏和显示加载微调器 - 活动指示器反应原生，管理道具和状态

Posted 2023-02-23

【中文标题】如何隐藏和显示加载微调器 - 活动指示器反应原生，管理道具和状态

【英文标题】：how to hide and show loading spinner - Activity Indicator react native, managing props and state

【发布时间】：2019-03-11 03:37:46

【问题描述】：

我创建了一个自定义活动指示器类，我想从我使用它的地方控制它的隐藏/显示。

这是我所做的。

CustomActivityIndi​​cator.js

    import React,  Component  from 'react';
import  ActivityIndicator, View, Text, TouchableOpacity, StyleSheet, Dimensions  from 'react-native';
import colors from '../../../styles/colors';
import  consoleLog  from '../../../utils/globalFunctions';

const  width, height  = Dimensions.get('window');

export default class CustomActivityIndicator extends Component 

    constructor(props)
      super(props);
      this.state = 
        show: this.props.show       
      
    

    static getDerivedStateFromProps(nextProps, prevState) 

      let outObj = ;
      consoleLog('Login - nextProps.show - ' + nextProps.show + ' prevState.show - ' + prevState.show);    
      if(nextProps.show !== prevState.show) 
        return 
          show: nextProps.show
        ;
    
  

    render() 
        consoleLog('CustomActivityIndicator - ' + this.state.show  );
      return (
        <View style=styles.container>
         <ActivityIndicator
               animating = this.state.show
               color = colors.primaryColor
               size = "large"/>
      </View>
      );
    
  

const styles = StyleSheet.create (
   container: 
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center'
   
)

我在Login中使用这只是为了演示

我最初将Login 中的show 状态设置为false，当我单击Login 按钮时，我想显示ActivityIndicator。

你能指导我哪里做错了吗？

登录.js

 class Login extends React.Component 

  constructor(props) 
    super(props);
    this.state = 
      show: false
   ;
  


  loginEndpointDecider = () => 
    this.setState(show: true)  ;
  

 render() 
    return (            
      <ScrollView style=styles.mainContainer>    
        <CustomActivityIndicator show=this.state.show/>         
        <TouchableOpacity title='Transactions'
          style =  height: 60, backgroundColor: '#673fb4', marginTop: 20, alignItems: 'center', justifyContent: 'center' 
          onPress=() =>           
            this.loginEndpointDecider();
          >
          <CommonText style= color: 'white'>
            strings.signInLower
          </CommonText>
        </TouchableOpacity>            
      </ScrollView>
    );
  

谢谢 回复

【参考方案1】：

与其将所有的 props 都放在实际的组件本身中——“React 思维模式”中更好的方法是能够有条件地渲染一个灵活的组件。这意味着在您的 Login.js 文件中，您可以使用状态在 render 方法中显示某些内容。

class Login extends React.Component 



constructor(props) 
    super(props);
    this.state = 
      show: false
   ;
  


  loginEndpointDecider = () => 
    this.setState(show: true)  ;
  

 render() 
    return (            
      <ScrollView style=styles.mainContainer>    
        this.state.show ? <CustomActivityIndicator/> : "not shown"       
        <TouchableOpacity title='Transactions'
          style =  height: 60, backgroundColor: '#673fb4', marginTop: 20, alignItems: 'center', justifyContent: 'center' 
          onPress=() =>           
            this.loginEndpointDecider();
          >
          <CommonText style= color: 'white'>
            strings.signInLower
          </CommonText>
        </TouchableOpacity>            
      </ScrollView>
    );
  

this.state.show ? <CustomActivityIndicator/> : "not shown" 是 if 语句的简写。

【参考方案2】：

如何用花括号和 show 的状态值包装 ActivityIndi​​cator，如下所示：

this.state.show && <CustomActivityIndicator />

我认为在这种情况下你真的不需要 show 道具。

【讨论】：

你能解释一下this.state.show && <CustomActivityIndicator />这一行的作用吗？我不明白。这能解决我面临的问题吗？

我觉得 CustomActivityIndicator 可以不用 show 道具。如果我提供的 sn-p 有效，则意味着状态下show 的值有条件地呈现CustomActivityIndicator

@BRDroid。答案很详细，好像 this.state.show = true 执行 否则什么都不做，所以如果 this.state.show 为 false 什么都不会渲染。