overFlow：'hidden' && borderRadius 在 React Native Android 中无法正常工作

Question

borderRadius 在 iOS 中按预期工作，但在 Android 中不按预期工作。我试图包裹Image在一个视图，并给borderRadius和overFlow: 'hidden'

  <View style={styles.userImageContainer}>
    <Image source={require('../../assets/images/user1.png')}
    style={styles.userImage}
    />
  </View>

样式表

const imageSize = 40;

  userImageContainer: {
    height: imageSize,
    width: imageSize,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: imageSize/2,
    overflow: 'hidden'
  },
  userImage: {
    height: imageSize,
    width: imageSize,
    borderRadius: imageSize/2,
    padding: 5,
    resizeMode: 'contain'
  },

最终结果图像

我正在使用 RN 0.42.2

Answer 1

更新

应用borderRadius和resizeMode作为道具而不是作为样式属性将解决 Android 中的 borderRadius 问题

<Image
  source={{uri: 'path'}}
  style={styles.image}
  resizeMode="cover"
  borderRadius={value}
/>

对于那些面临这个问题的人来说，这是 react-native android 的一个已知问题。到目前为止，还没有修复它。

https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-安卓