javascript - 如何拉伸(stretch)不适用于 native 图像的属性?

标签 javascript css reactjs react-native flexbox

我创建了一张卡片,其父组件即卡片是一个 Flex。所以使用 alginSelf 后: 'stretch'

代码:

<View style={styles.card}>
    <Image source={require('./Images/facility/facility.png')} style={styles.imgFacility}></Image>
    <TouchableHighlight>
        <Text style={styles.title}>Barasti /</Text>
    </TouchableHighlight>
</View>

CSS:

card: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16
},
imgFacility: {
    height: 200,
    alignSelf: 'stretch'
},
title: {
    color: '#ff3385'
}

上面的代码 alginSelf: 'stretch' 不起作用,为什么会这样?可能是什么原因?

查看截图:

enter image description here

最佳答案

如果您希望图像为全​​宽,请像这样更改您的 imgFacility 样式:

imgFacility:{
width: Dimensions.get('window').width,
height: 200,
alignSelf: 'center'
}

关于javascript - 如何拉伸(stretch)不适用于 native 图像的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52484126/

相关文章:

javascript - 提交表单而不刷新页面

javascript - 使用 codeigniter 数据不会插入数据库

javascript - Angular Directive(指令)和 ng 类

html - 非 float 元素上的 float 元素 :

html - 导航栏 - 如果事件 URL 突出显示背景?

javascript - RTCPeerConnection.createDataChannel() 和 RTCPeerConnection.onDataChannel() 的区别

html - 无法使用 youtube 和响应式调整容器大小

javascript - 在 Redux 中将多个操作传递给 mapDispatchToProps

reactjs - 使用 React useContext 钩子(Hook)在调度调用后不更新 React 状态

reactjs - 在 createTheme 中覆盖 Box 组件