Question

我创建了一个React Native组件并为其添加了一些动画。现在当我用该元素包围其他元素（Ex：Text）时，Text也会获得动画。怎么避免这个？我想让我的组件拥有动画，但它的内部组件保持不动。

MyImage组件代码：

return (
    <Image
        defaultSource={{uri: './placeholder.jpg'}}
        source={this.props.sourceUri}
        style={imageStyle}>
        <View>{this.props.children}</View>
    </Image>
);

实现：

<MyImage imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={{uri: item.image}}>
    <View style={styles.nameContainer}>
        <Text style={styles.textMain}>{item.name}</Text>
    </View>
</MyImage>

如何实现这一目标？

Answer 1

不是让自定义组件的子项成为图像的子项，而是必须位于同一级别，绝对定位。 MyImage非常粗略地看起来像这样：

<View style={{ ... apply width and height ..., position: 'relative' }}>
    <Image style={{ top:0, bottom:0, left:0 right: 0, position: 'absolute' }} />
    <View  style={{ top:0, bottom:0, left:0 right: 0, position: 'absolute' }}>this.props.children}</View>
</View>

在React Native组件中有独立的内部内容

1 个答案: