保持视图大小成比例

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-

这是实现它的最简单方法。我使用常量来存储main的高度，因此它可以用作内部视图的宽度。

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>
  )
}