Как уменьшить или добиться одинаковой высоты между компонентами в ряду - PullRequest
Новая
       18

Как уменьшить или добиться одинаковой высоты между компонентами в ряду

0 голосов
/ 26 мая 2020

Я новичок в RN, у меня проблемы с приоритетом высоты, включая изображение, которое я не могу найти способ разрешить.

В основном я хочу, чтобы высота изображения всегда была равна общей высоте следующего представления в строке (представление с styles.itemDetails).

Изображение всегда увеличивается до собственной высоты изображения, и если я использую aspectRatio, оно игнорирует resizeMode свойство и не вырастет до доступного пространства.

enter image description here

Компонент: 

    <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 ]

1 голос
/ 26 мая 2020

Вы можете получить высоту itemDetails с помощью события 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>
0 голосов
/ 26 мая 2020

Попробуйте установить для вашего itemImg значение 1em: 

img {height: 1em;}
<div>
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" /> Your Text
</div>

Если это не сработает, вы можете попробовать установить родительский элемент «item» на inline-flex и / или удалить flex: 1,.

...