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

最终结果Image

我正在使用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-android~~

overFlow：'隐藏'＆amp;＆amp; borderRadius在React Native Android中无法正常工作

1 个答案: