亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何縮小或強制行中組件之間的高度相等

如何縮小或強制行中組件之間的高度相等

九州編程 2022-09-02 10:30:41
我是RN的新手,我在處理高度優先級涉及圖像時遇到了麻煩,我似乎找不到解決的方法?;旧?,我希望圖像的高度始終等于行中下一個視圖的總高度(帶有 )。styles.itemDetails圖像始終增長到其圖像的原始高度,如果我使用它,請忽略該屬性,并且不會增長到可用空間。aspectRatioresizeMode元件:    <View style={styles.item}>      <Image style={styles.itemImg} source={source} />      <View style={styles.itemDetails}>        <Text>{poi.name}</Text>        <Text>{poi.conciseDescription}</Text>      </View>    </View>風格:const styles = StyleSheet.create({  item: {    marginTop: 8,    marginHorizontal: 8,    borderRadius: 8,    backgroundColor: '#E5E5E5',    flexDirection: 'row',  },  itemImg: {    flex: 1,    borderTopLeftRadius: 8,    borderBottomLeftRadius: 8,    resizeMode: 'cover',  },  itemDetails: {    flex: 2,    margin: 16,    backgroundColor: 'green',  },  itemTitle: {    fontSize: 22,  },});
查看完整描述

2 回答

?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

您可以使用 onLayout 事件獲取 itemDetails 高度,并將其設置為圖像高度


const [imageHeight, setImageHeight] = useState(0)


<View style={styles.item}>

  <Image style={[styles.itemImg, {height: imageHeight}]} source={source} />

  <View 

       style={styles.itemDetails} 

       onLayout={e => { setImageHeight(e.nativeEvent.layout.height) }}

  >

    <Text>{poi.name}</Text>

    <Text>{poi.conciseDescription}</Text>

  </View>

</View>


查看完整回答
反對 回復 2022-09-02
?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

嘗試將 itemImg 設置為 1em:


img {height: 1em;}

<div>

  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" /> Your Text

</div>

如果這不起作用,您可以嘗試將父元素“item”設置為和/或刪除 。inline-flexflex: 1,


查看完整回答
反對 回復 2022-09-02
  • 2 回答
  • 0 關注
  • 90 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號