react-native - 保持视图大小成比例

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

您可以动态计算 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>
  )
}

Answer 3

游乐场：https ://snack.expo.io/SkED1_YZ-

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