在 React Native 上显示 'auto' 不工作

Question

我想在用动画更改不透明度后隐藏元素。当我设置显示 'none' 时它工作并隐藏元素，但是当我使用 display:'auto' 或 display:'' 它不工作并崩溃 android app

这是我的代码示例：

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>
      </>
    );
  }
}

如何解决？

谢谢

Answer 1

当您想让组件再次可见时，请使用 display: 'flex'。在react native中，display只支持'none'和'flex'。 'flex' 是默认值。

希望对你有用。

在 React Native 上显示 'auto' 不工作

display 'auto' on react native not working

css

react-native

display