React Native Android中GIF图像的圆角问题 [英] Rounded corner issue with GIF image in react native android
问题描述
我是本机反应的新手,我在列表视图中显示GIF图像的列表,我将图像的圆角弄圆了,我尝试使用普通图像来做到这一点,并且它可以正常工作,但是对于GIF图像,它却无法正常工作,我现在不工作为什么.
I am new for react native and i am showing a list of GIF images in list view and i what image corner rounded i try to do this with normal images and it's working but with GIF image it's not working i don't now why.
我使用下面的样式和代码对角进行圆角处理.
I use below style and code for make corner rounded.
<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,
}
并尝试在图像和项目样式下添加以下属性,以解决重叠问题,但拐角仍为正方形.
and tried to add below property in image and item style for resolve overlapping issue but corner still in square shape.
overflow: 'hidden',
推荐答案
您需要设置overlayColor样式.它在这里 https://facebook.github.io/react-native /docs/image.html#style
You need to set overlayColor style. It described here https://facebook.github.io/react-native/docs/image.html#style
image: {
width: 75,
height: 75,
borderRadius: 10,
overlayColor: 'white',
}
image: {
width: 75,
height: 75,
borderRadius: 10,
overlayColor: 'white',
}
这篇关于React Native Android中GIF图像的圆角问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!