使用无显示代替状态显示

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

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 }]

Answer 2

下次，如果您准备点心来演示问题，那就太好了。

此模式将为您服务...

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

我为您制作了一个小吃演示

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