react-native - 溢出 : 'hidden' && borderRadius not working properly in React Native Android

Question

borderRadius 在 iOS 中按预期工作，但在 Android 中不按预期工作。我试图包装 Image在一个 View 中，给了 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'
  },

最终结果 Image

我正在使用 RN 0.42.2

Answer 1

更新

申请borderRadius和 resizeMode作为 Prop 而不是作为样式属性将修复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-android