使用无显示代替条件状态渲染

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 样式道具时如何遇到这个问题

原文由 mfrachet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TL;TR

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

恕我直言，

您关于生命周期/渲染的问题似乎是合法的。

因为我实际上无法给出任何答案…

我最近尝试使用 { display: 'none' } 时遇到了一些奇怪的错误（将显示恢复到 'flex' 一些子组件仍然没有渲染），或 { width: 0, height: 0 } （当返回 'flex' 布局未恢复）。

不用说，通过一些常用技巧来避免渲染（ return enabled && <MyComponent {...}/> ）不是解决方案（安装和卸载组件需要大量计算，这会破坏动画帧速率）。

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

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

我的实现类似于

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

原文由 Joseph Merdrignac 发布，翻译遵循 CC BY-SA 4.0 许可协议