react native android中GIF圖像的圓角問題

Question

我是 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',

Answer 1

您需要設置 overlayColor 樣式。 它在這里描述了https://facebook.github.io/react-native/docs/image.html#style

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

Answer 2

<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' 進行比通常的高度和寬度配置后，您的問題將得到解決。