resizeMode 在 React Native Android 中不起作用答案

【问题标题】：resizeMode not working in React Native AndroidresizeMode 在 React Native Android 中不起作用
【发布时间】：2017-03-14 13:14:53
【问题描述】：

2021 年更新

在 RN Android 中作为 Image 的样式属性时，resizeMode 不起作用

~~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~~ 0.66.3

【问题讨论】：

如果不使用 const 直接使用值会怎样？
嗨，直接给定值没有区别

标签： react-native

【解决方案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

【讨论】：