coin arrondi problème avec l'image GIF en réaction native android

Question

Je suis nouveau pour réagir natif et je montre une liste d'images GIF en vue liste et je quel coin de l'image arrondi je tente de le faire avec des images normales et ça fonctionne, mais avec Image GIF ça ne marche pas je ne sais pas pourquoi.

J'utilise ci-dessous le style et le code pour rendre le coin arrondi.

<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, 
    } 

et essayé d'ajouter ci-dessous la propriété dans l'image et le style d'élément pour résoudre problème de chevauchement, mais coin encore en forme carrée.

overflow: 'hidden', 

Answer 1

Vous devez définir le style overlayColor. Il décrit ici https://facebook.github.io/react-native/docs/image.html#style

image: { width: 75, height: 75, borderRadius: 10, overlayColor: 'white', }