需求:
現(xiàn)在有這樣一種情況是在開發(fā)中經(jīng)常遇到的,外層是一個scrollview組件泰偿,組件內(nèi)部有很多組件高度不固定熄守,最后是一個按鈕,在不滿一個屏幕時按鈕位居底部耗跛,當(dāng)超過一屏幕時按鈕位于組件的末尾裕照,可以隨著scrollview滾動。
效果圖:
方法:
如果使用絕對定位布局position:absolute肯定是不可以调塌,因為按鈕會始終位于底部,當(dāng)組件超過一個屏幕時按鈕依然在屏幕底部晋南,不會隨著scrollview組件滾動。
然后想到flex布局里面有一個space-betweent類型羔砾,那么是不是可以將scrollview內(nèi)部的組件分為兩部分负间,按鈕與其他組件。然后在其他組件的外層套一個view姜凄,在使用space-betweent布局就可以了政溃。然后進行嘗試,發(fā)現(xiàn)在不滿一屏幕時檀葛,按鈕可以在底部顯示玩祟。當(dāng)組件高度超過一個屏幕時,發(fā)現(xiàn)還是不行屿聋。但是我覺的我的思路大概是正確的空扎,于是尋找問題出在哪里藏鹊。
后來還是被我發(fā)現(xiàn)了,原來問題出現(xiàn)在flex:1 這里转锈。
其實這個關(guān)鍵在于scrollview內(nèi)部組件的高度是多少盘寡,我們可以獲取到組件內(nèi)部的高度,如果超過一個屏幕就不設(shè)置flex:1這個屬性撮慨,不超過就設(shè)置這個屬性竿痰。
核心代碼如下:
layout = (event)=>{
let { x, y, width, height } = event.nativeEvent.layout;
if(height>(HEIGHT-SCALE(94)-SCALE(20)-SCALE(120))){
this.setState({
flex:false,
})
}else{
this.setState({
flex:true,
})
}
console.log('height',height,'SCREENHEIGHT',HEIGHT-SCALE(94)-SCALE(20)-SCALE(120));
};
<ScrollView
overScrollMode = {'always'}
contentContainerStyle={[{justifyContent:'space-between'},this.state.flex?{flex:1}:null]}
keyboardDismissMode = {'on-drag'}
showsVerticalScrollIndicator={false}>
<View onLayout={this.layout}>
{this.renderRest()}
{this.renderRule()}
<View style={{marginTop:SCALE(20),marginLeft:SCALE(20),marginRight:SCALE(20),backgroundColor: 'white'}}>
{this.renderTip()}
{this.renderSeparator()}
{this.renderType()}
{this.renderSeparator()}
{this.renderDate()}
{this.renderSeparator()}
{this.renderCause()}
</View>
</View>
{this.renderBtn()}
</ScrollView>
完整代碼僅供參考:
https://github.com/wuyunqiang/ReactNativeUtil/issues/7