Quiero ocultar el elemento después de cambiar la opacidad con la animación. cuando configuro mostrar 'ninguno', funciona y oculta el elemento, pero cuando uso display:'auto' o display:'' no funciona y falla la aplicación de Android

Aquí está mi ejemplo de código:

export default class FadeInOut extends React.Component {
  constructor(props) {
    super(props);
    this.state =  { 
                    visibleChild: this.props.animShow,
                    opacityVal: new Animated.Value(visiChangeG ? 1 : 0),
                  }
  }

  componentDidUpdate() {
    if (!visiChangeG) {
      Animated.timing(this.state.opacityVal, {
        toValue: 0,
        duration: this.props.animDuration,
        useNativeDriver: true 
      }).start();
    }

    if (visiChangeG) {
      Animated.timing(this.state.opacityVal, {
        toValue: 1,
        duration: this.props.animDuration,
        useNativeDriver: true
      }).start();
    }
  }

  render() {
    return (
      <>
        <Animated.View
          pointerEvents={visiChangeG ? 'auto' : 'none'}
          style={[{width:300, height:300, display: ''},  //it not working and crashing android app
                   {opacity: this.state.opacityVal}]}>
          {this.props.children}
        </Animated.View>
      </>
    );
  }
}

¿cómo se puede solucionar eso?

Gracias

0
mojtaba sh 27 ago. 2020 a las 12:02

1 respuesta

La mejor respuesta

Utilice display: 'flex' cuando desee que el componente vuelva a estar visible. En react native, display solo admite 'none' y 'flex'. 'flex' es el valor predeterminado.

Espero que funcione para ti.

0
Farid Ansari 27 ago. 2020 a las 10:09