TL;TR

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

恕我直言

你关于生命周期/渲染的问题似乎是合理的。
既然我不能给予你答案...
我最近在尝试使用{ display: 'none' }时遇到了一些奇怪的bug（当将显示恢复为'flex'时，一些子组件仍然没有呈现）。
或{ width: 0, height: 0 }（当返回到'flex'时，布局未恢复）。
不用说，通过一些常见的技巧（return enabled && <MyComponent {...}/>）避免渲染并不是解决方案（安装和卸载组件需要大量的计算，这会破坏动画的帧率）。
当我希望在动画期间隐藏组件而不中断帧率时，我发现{ transform: [{ scale: 0 }] }是最好的解决方案：

• 布局未更改（alignSelf: 'center'仍然有效）
• 隐藏的组件不会捕捉任何触摸事件，并允许底层组件对触摸作出React

我的实现类似于：

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

下一次，如果你设置一个小吃来演示你的问题，那将是超级酷的。
这个模式对你有用...

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

我尝试了各种方法，但最后style: {height: 0, width: 0, opacity: 0}对我起作用了。