[英]Rounded corner issue with GIF image in react native android
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.我是 React Native 的新手,我在列表视图中显示 GIF 图像列表,我尝试用普通图像执行此操作,它可以正常工作,但 GIF 图像无法正常工作,我现在不知道为什么。
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',
You need to set overlayColor style.您需要设置 overlayColor 样式。 It described here https://facebook.github.io/react-native/docs/image.html#style
它在这里描述了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%',
}
You can wrap GIF with View container.您可以使用 View 容器包装 GIF。 After than usual height and width configurations with overFlow: 'Hidden' your problem will be fixed.
在使用 overFlow: 'Hidden' 进行比通常的高度和宽度配置后,您的问题将得到解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.