как прятать и показывать загрузочный счетчик - Индикатор активности реагирует на родной, управляя реквизитом и состоянием

Question

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

Вот что я сделал.

CustomActivityIndicator.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 это просто для демонстрации

Я изначально устанавливаю состояние show на false в Login и когда я нажимаю *Кнопка 1014 * Я хочу показать ActivityIndicator.

Можете ли вы подсказать мне, где я ошибаюсь.

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

Спасибо R

Answer 1

Вместо того чтобы располагать все реквизиты внутри самого фактического компонента - лучший способ в «React mindset» - это возможность условно визуализировать гибкий компонент.Это означает, что внутри вашего файла Login.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}>    
        {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.

Answer 2

Как насчет обёртывания ActivityIndicator фигурными скобками и значением состояния show следующим образом:

{this.state.show && <CustomActivityIndicator />}

Не думаю, что вам действительно понадобится шоу-реквизит в этомслучай.