飼養視圖大小比例

我有一個容器View，它有一個靜態的高度，可以說，50：飼養視圖大小比例

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

現在這個容器有一個孩子，這需要整個母公司的高度，它的高度設置爲100% ：

child: { 
    height: 100%, 
}

我想要這個孩子元素自動成爲理想的正方形，用同樣寬度的高度，所以，如果明天我會改變高度父」 60 那麼孩子身高會自動增長（因爲height: 100%）但我怎樣才能設置其寬度自動適應自己？ width: 'auto'沒有任何效果..

遊樂場：https://snack.expo.io/SkSWxPKbZ

來源

2017-05-29 Cherniv

遊樂場：https://snack.expo.io/SkED1_YZ-

這僅僅是實現這一目標的最簡單方法。我用一個常量來存儲主體的高度，因此它可以用作內部視圖的寬度。

來源

2017-05-29 10:06:21

你可以動態計算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> 
) 
}

來源

2017-05-29 10:28:09 kimar

謝謝您的回答，但我已經找到一種方法來做到這一點的風格水平。 – Cherniv

aspectRatio: 1的伎倆，如：

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

這樣的孩子總是會100％父母的高度和寬度將與其身高完全一致。

工作例如：https://snack.expo.io/SkWzrCYZ-

來源

2017-05-29 17:04:25 Cherniv

飼養視圖大小比例

回答

相關問題