Javascript 如何收缩或强制行中组件之间的高度相等

我是RN的新手，我在处理高度优先权涉及的图像方面有困难，我似乎找不到解决的方法

基本上，我希望图像的高度始终等于行中下一个视图（具有

style.itemDetails

的视图）的总高度

图像始终会增长到其图像本机高度，如果使用

aspectRatio

它会忽略

resizeMode

属性，并且不会增长到可用空间

组成部分：

    <View style={styles.item}>
      <Image style={styles.itemImg} source={source} />
      <View style={styles.itemDetails}>
        <Text>{poi.name}</Text>
        <Text>{poi.conciseDescription}</Text>
      </View>
    </View>

---

尝试将itemImg设置为1em：

img{高度：1em；}

你的文字

您可以使用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>

const[imageHeight，setImageHeight]=useState（0）
{setImageHeight（e.nativeEvent.layout.height）}
>
{poi.name}
{poi.简明描述}

您必须在容器

项：{display:flex}

@alan_jouhar谢谢，但是添加

display:flex

似乎没有任何效果。它似乎没有

em

单元，删除<代码> flex：1 < /Cl>使图像占据容器的整个宽度（我认为它是代码> flex：0 < /COD>）谢谢，这几乎是这样做的，但是由于某种原因，它仍然在图像下面留下了一点空白，不知道为什么，我会继续检查，我发现高度没有

边距

值，将其与

onLayout

中的高度结合使用效果很好。不确定是否有其他方法不必使用回调就可以做到这一点，但现在可以这样做了。谢谢

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>