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

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}>&nbsp; <Image style={[styles.itemImg, {height: imageHeight}]} source={source} />&nbsp; <View&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;style={styles.itemDetails}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;onLayout={e => { setImageHeight(e.nativeEvent.layout.height) }}&nbsp; >&nbsp; &nbsp; <Text>{poi.name}</Text>&nbsp; &nbsp; <Text>{poi.conciseDescription}</Text>&nbsp; </View></View>

Answer 2

尝试将 itemImg 设置为 1em：img {height: 1em;}<div>&nbsp; <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" /> Your Text</div>如果这不起作用，您可以尝试将父元素“item”设置为和/或删除 。inline-flexflex: 1,