React Native-如何在TouchableOpacity中填充图像？

Question

我正在尝试实现这种外观：

我得到的是这个：

这是我的风格：

adsContainer: {
    flex: 1,
    top: responsiveWidth(5),
    alignItems: 'center',
    justifyContent: 'center'
  },
  playAdButton: {
    width: responsiveWidth(73),
    height: responsiveWidth(15),
    borderRadius: 15,
    alignItems: 'stretch'
  },
  playAdImage: {
    width: null,
    height: null,
    flex: 1,
    borderRadius: 15
  },

这是我的组成部分：

<View style={styles.adsContainer}>
            <TouchableOpacity style={styles.playAdButton}>
              <Image source={require('../../../../assets/images/play-ads.png')} style={styles.playAdImage}/>
            </TouchableOpacity>
          </View>

Answer 1

尝试一下，让我知道。

playAdImage: {
  width: null,
  height: null,
  flex: 1,
  borderRadius: 15,
  alignSelf: 'center', //add this

},

playAdButton: {
  width: responsiveWidth(73),
  height: responsiveWidth(15),
  borderRadius: 15,
  alignItems: 'center', //add this
  flexDirection: 'row',//add this
},

如果它不起作用，我们可能还知道 responseWidth 函数的作用

Answer 2

尝试使用样式表absoluteFillObject

playAdImage: {
width: null,
height: null,
...StyleSheet.absoluteFillObject,
flex: 1,
borderRadius: 15

}，