使用`display: none`

Question

我试图使用条件渲染（在这种特定情况下），这将允许我做出类似的东西：

<Image
            source={{ uri: "https://images4.alphacoders.com/221/221716.jpg" }}
            style={this.state.isLoaded ? styles.loaded : { display: "none" }}
            onLoadEnd={() => {
              console.log("test"), this.setState({ isLoaded: true });
            }}
          />

主要问题是当使用display: none样式时，React Native似乎无法使用其内部生命周期函数，因此不会调用onLoadEnd。它没有记录任何内容。

在使用display样式道具

时，我不知道如何遇到此问题

Answer 1

下次，如果你设置一个小吃来演示你的问题，那将是非常酷的。

这种模式对你有用......

    <Image
        source={{ uri: "https://images4.alphacoders.com/221/221716.jpg" }}
        style={[{width: 0, height: 0,},
        this.state.isLoaded && {width: 400, height: 400,}]}
        resizeMode="contain"
        onLoadEnd={() => {
          this.setState({ isLoaded: true });
        }}
      />

我创建了demo on snack for you

使用`display: none`

进行更新

    <Image
        source={{ uri: "https://images4.alphacoders.com/221/221716.jpg" }}
        style={[{width: 400, height: 400,},
        !this.state.isLoaded && {display: 'none'}]}
        resizeMode="contain"
        onLoadEnd={() => {
          this.setState({ isLoaded: true });
        }}
      />

Answer 2

TL; TR

<强> { transform: [{ scale: 0 }] } 是一个很好的解决方案

IMHO，

关于生命周期/渲染的问题似乎是合法的因为我实际上不能给出任何答案...
我最近尝试使用{ display: 'none' }时遇到了一些奇怪的错误（将显示恢复为'flex'时，某些子组件仍未呈现），或{ width: 0, height: 0 }（返回'flex'时布局没有恢复。）毋庸置疑，通过某些方法避免渲染是常见的技巧（return enabled && <MyComponent {...}/>）不是解决方案（安装和卸载组件需要大量计算以破坏动画帧速率）。

由于我希望在动画期间隐藏组件而不破坏帧率，我发现{ transform: [{ scale: 0 }] }是最佳解决方案：

布局不会改变（alignSelf: 'center'仍然有效）。
隐藏的组件不会捕获任何触摸事件，并允许底层组件对触摸作出反应。

我的实现类似于

view.setNativeProps({ transform: [{ scale: 0 }]

Answer 3

我尝试了各种方法，但最终样式：{高度：0，宽度：0，不透明度：0}对我有用。