[英]Rounded corner issue with GIF image in react native android
我是 React Native 的新手,我在列表视图中显示 GIF 图像列表,我尝试用普通图像执行此操作,它可以正常工作,但 GIF 图像无法正常工作,我现在不知道为什么。
我使用下面的样式和代码来圆角。
<ListView contentContainerStyle={styles.list}
showsHorizontalScrollIndicator={false}
horizontal= { true }
dataSource={this.state.dataSource}
ref={ref => this.listView = ref}
renderRow={(rowData) => {
return (
<TouchableOpacity style={styles.item} onPress={() => this.stickerSelected(rowData)}>
<Image style={styles.image} source={this.props.images[rowData].src}/>
</TouchableOpacity>
)
}}
/>
list: {
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#FFFDEB',
flexWrap: 'wrap',
paddingLeft: 6,
paddingRight: 6
},
item: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#EAD62F',
borderRadius: 10,
margin: 3,
width: 75,
height: 75,
},
image: {
width: 75,
height: 75,
borderRadius: 10,
}
并尝试在图像和项目样式中添加以下属性以解决重叠问题,但角落仍为方形。
overflow: 'hidden',
您需要设置 overlayColor 样式。 它在这里描述了https://facebook.github.io/react-native/docs/image.html#style
image: { width: 75, height: 75, borderRadius: 10, overlayColor: 'white', }
<View style={styles.imgBorder}>
<Image source={require('../../assets/images/giphy2.gif')}
style={styles.profilePicture} />
</View>
profilePicture: {
width: 150,
height: 200,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
marginTop: '20%',
borderWidth: 4,
borderColor: 'purple',
},
imgBorder: {
width: 150,
height: 150,
borderRadius: 300,
overflow: 'hidden',
marginLeft: 'auto',
marginRight: 'auto',
alignItems: 'center',
justifyContent: 'center',
marginTop: '20%',
}
您可以使用 View 容器包装 GIF。 在使用 overFlow: 'Hidden' 进行比通常的高度和宽度配置后,您的问题将得到解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.