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

Question

我是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,  },});

Answer 1

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

Answer 2

尝试将 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,