Сохранение размера изображения пропорциональным

Question

У меня есть контейнер View и он имеет статическую высоту, скажем, 50:

container: {
  width: '100%',
  height: 50,
}

Теперь у этого контейнера есть один дочерний элемент, который принимает высоту всего родителя, устанавливая его высоту в 100%:

child: {
  height: 100%,
}

Я хочу, чтобы этот дочерний элемент был идеально квадратным, с шириной, равной его высоте, автоматически, поэтому, если завтра я изменит высоту родительского элемента на 60, тогда высота ребенка будет автоматически расти (из-за height: 100%) но как я могу установить его ширину, чтобы она соответствовала автоматически? width: 'auto' не имеет никакого эффекта..

Детская площадка: https://snack.expo.io/SkSWxPKbZ

Answer 1

aspectRatio: 1 делает трюк, как:

child: {
  height: '100%',
  aspectRatio: 1
}

Таким образом, ребенок всегда будет принимать 100% от высоты родителя, а его ширина будет в точности соответствовать его высоте.

Рабочий пример: https://snack.expo.io/SkWzrCYZ-

Answer 2

PlayGround: https://snack.expo.io/SkED1_YZ-

Это просто самый простой способ добиться этого. Я использовал константу для хранения высоты основного, поэтому ее можно использовать как ширину внутреннего вида.

Answer 3

Вы можете вычислить availableHeight динамически и установить ширину в то же значение:

constructor() {
  super();
  this.state = {
    availableHeight: 0,
  }
}


render() {
  return (
    <View style={styles.container}>
      <View 
        style={{ 
          flex: 1, 
          width: this.state.availableHeight,
        }} 
        onLayout={(e) => {
          const { height } = e.nativeEvent.layout;
          this.setState({availableHeight: height});
        }}>
      </View>
    </View>
  )
}