需求：
現(xiàn)在有這樣一種情況是在開發(fā)中經(jīng)常遇到的，外層是一個(gè)scrollview組件，組件內(nèi)部有很多組件高度不固定，最后是一個(gè)按鈕，在不滿一個(gè)屏幕時(shí)按鈕位居底部，當(dāng)超過一屏幕時(shí)按鈕位于組件的末尾，可以隨著scrollview滾動(dòng)。
效果圖：
方法：
如果使用絕對定位布局position:absolute肯定是不可以，因?yàn)榘粹o會始終位于底部,當(dāng)組件超過一個(gè)屏幕時(shí)按鈕依然在屏幕底部，不會隨著scrollview組件滾動(dòng)。
然后想到flex布局里面有一個(gè)space-betweent類型，那么是不是可以將scrollview內(nèi)部的組件分為兩部分，按鈕與其他組件。然后在其他組件的外層套一個(gè)view，在使用space-betweent布局就可以了。然后進(jìn)行嘗試，發(fā)現(xiàn)在不滿一屏幕時(shí)，按鈕可以在底部顯示。當(dāng)組件高度超過一個(gè)屏幕時(shí)，發(fā)現(xiàn)還是不行。但是我覺的我的思路大概是正確的，于是尋找問題出在哪里。
后來還是被我發(fā)現(xiàn)了，原來問題出現(xiàn)在flex:1 這里。
其實(shí)這個(gè)關(guān)鍵在于scrollview內(nèi)部組件的高度是多少，我們可以獲取到組件內(nèi)部的高度，如果超過一個(gè)屏幕就不設(shè)置flex:1這個(gè)屬性，不超過就設(shè)置這個(gè)屬性。
核心代碼如下：
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
