时间戳

首页 > 解决方案 > 反应原生绝对定位使图像裁剪

react-native - 反应原生绝对定位使图像裁剪

问题描述

我在将图像放置在容器内时遇到问题，那就是当我给图像position: absolute和top属性图像从顶部裁剪时，这是问题所在：

在此处输入图像描述

这是我的代码：

<View style={styles.OurTherapistsContainer}>
          <View style={styles.therapistCard}>
            <View style={styles.imageContainer}>
            <Image style={styles.image} source={require('../assets/img/leong.png')} />
            </View>
          </View>
      </View>

...
therapistCard: {
    width: 150,
    height: 150,
    borderRadius: 25,
    borderWidth: 1,
    borderColor: '#DFEEFF',
    overflow: 'hidden',
  },
  imageContainer: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
  },
  image: {
    width: '100%',
    height: '100%',
    position: "absolute",
    top: 30
  }

我怎样才能解决这个问题？

标签： react-nativestylesheet

解决方案

尝试在图像样式中使用 resizeMode

resizeMode:'contain'

推荐阅读