九州編程
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>

慕容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,
添加回答
舉報
0/150
提交
取消