1. 程式人生 > >react native 自適應高度

react native 自適應高度

在專案中可能會遇到這樣的需求,可以使用onlayout獲取高度,然後設定上去。

先在需要獲取高度的地方繫結一個函式,

 <View style={styles.OilCon} onLayout={this.changeViewLayout.bind(this)}>
    <Text>hello, I am Test.</Text>
</View>

<View ref={test=> {
              this.test = test;
            }}
            style={{ height: 0, overflow: "hidden" }}
          >
<Text>改變</Text>
</View>

函式內拿到高度,

changeViewLayout(event) {
    this.Height = event.nativeEvent.layout.height;
  }

然後在需要的地方去修改高度,

this.test.setNativeProps({
          style: {
            height: this.Height
          }
        });