react-native - 动画 : Image component cannot contain child even when child component position is absolute

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>
)

它现在在更新由以下人员管理的 View 的属性“不透明度”时出错:RCTView



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

Answer 1

你可以使用这个惊人的技巧:

var AnimatedImage = Animated.createAnimatedComponent(ImageBackground)

而不是 ImageBackground或 Animated.Image