компонента не исчезает даже после того, как изменения состояния в реакции родных

Question

Ниже мой код:

// Styling for the common loader 
const loader = StyleSheet.create({ 
    centering: { 
    flex: 1, 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    padding: 8, 
    zIndex: 1005, 
    backgroundColor: '#fff', 
    opacity: 0.8 
    }, 
}); 

// State 
this.state = { 
    animating: false 
}; 

// Component 
{ 
    this.state.animating ? 
    <ActivityIndicator 
    animating={this.state.animating} 
    color="#8bcb43" 
    style={loader.centering} 
    size="large" 
    /> 
    : 
    null 
} 

Я приложил скриншот того, как загрузчик выглядит, когда this.state.animating является истинным и когда лжи.

Я удивлен, почему компонент не исчезает, когда this.state.animating является ложным. Я не уверен, что я делаю неправильно.

Answer 1

Я столкнулся с этой проблемой девять месяцев назад, когда я использовал React Native 0.35.0 и это то, что я сделал тогда, когда я не нашел подходящего решения:

import React, { Component } from 'react'; 

import { 
    StyleSheet, 
    ActivityIndicator 
} from 'react-native'; 

// Styling for the common loader 
const loader = StyleSheet.create({ 
    centering: { 
    flex: 1, 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    zIndex: 5, 
    backgroundColor: '#fff', 
    opacity: 0.8 
    }, 

    hideIndicator: { 
    position: 'absolute', 
    top: -100, 
    opacity: 0 
    } 
}); 

export default class Loader extends Component { 

    render() { 
    /* The reason for adding another activity indicator was to hide the first one */ 
    /* At the time of development, ActivityIndicator had a bug of not getting hidden */ 
    return (
     <ActivityIndicator 
     animating={ this.props.animating } 
     color="#8bcb43" 
     style={ this.props.animating ? loader.centering : loader.hideIndicator } 
     size="large" 
     /> 
    ); 
    } 
} 

Я переключать стиль для загрузки состояния.

style={ this.props.animating ? loader.centering : loader.hideIndicator }

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