动画：即使子组件位置是绝对的，图像组件也不能包含子组件

Question

我正在使用React Native，现在知道Image不能再包含子组件了。

问题是我正在使用这样的动画组件：

return (
<Animated.Image source={this.props.image}
                                style={[styles.top, borderStyles, {
                                width: this.state.top_width,
                                height: this.state.top_height,
                                transform: this.state.top_pan.getTranslateTransform()
                            }]}>
                    {back}
</Animated.Image>
)

另一种方法是使用ImageBackground，但是当我尝试将上面的代码转换为使用如下的自定义动画时：

var AnimatedImage = Animated.createAnimatedComponent(ImageBackground)

return (
            <AnimatedImage
                source={this.props.image}
                style={[styles.top, borderStyles, {
                width: this.state.top_width,
                height: this.state.top_height,
                transform: this.state.top_pan.getTranslateTransform()
                }]}
            >
                {back}
            </AnimatedImage>
)

现在在更新属性＆＃39; opacity＆＃39;时会出现错误管理的视图：RCTView

在动画中使用ImageBackground以适应RN 0.50破坏变化的正确方法是什么？

Answer 1

您可以使用以下神奇技巧：

std::nullable

代替var AnimatedImage = Animated.createAnimatedComponent(ImageBackground) 或ImageBackground