首先引入github一個庫叙谨，react-native-action-button棒口，這是一個懸浮按鈕的組件。
既然我們要點擊按鈕回到頂部榜聂，肯定不是希望滑到最下面才出現(xiàn)這個按鈕搞疗，肯定希望滾動條滑動，這個按鈕也一直固定在這里
這時候就要注意须肆，ActionButton不能放在ScrollView這個標(biāo)簽里面匿乃，否則只能到最底部才會顯示，給ScrollView最外層加一層View標(biāo)簽豌汇，View標(biāo)簽得設(shè)置style={{flex:1,backgroundColor:'#fff'}},否則是不顯示內(nèi)容的幢炸。然后ScrollView標(biāo)簽和ActionButton標(biāo)簽都放在View里面去。
首先要設(shè)計狀態(tài)
state={
isTop:false
}
ScrollView標(biāo)簽里面有OnScroll方法也就是滑動就觸發(fā)這個方法拒贱，并且要寫一個ref宛徊，后期跳轉(zhuǎn)到頂部可以直接拿過來用
<ScrollView
onScroll={this._getBackTop}
style={{flex:1,backgroundColor:'#fff'}}
ref={(r) => this.scrollview = r}
>
</ScrollView>
這里我寫的判斷佛嬉，是根據(jù)我需求滑到多少距離就顯示，可以自己打印一下闸天，而確定高度
_getBackTop = (e) => {
let offsetY = e.nativeEvent.contentOffset.y; //滑動距離
if(offsetY > 720){
this.setState({
isTop : true
})
}else{
this.setState({
isTop:false
})
}
}
這時候就可以顯示了暖呕，然后點擊滑到頂部自然也很簡單,這里的renderIcon里面放的是引入的圖標(biāo)，我用的是ant-design組件庫里面的Icon苞氮。
{
this.state.isTop === true ? <ActionButton
renderIcon= {() => (<Icon name='arrow-up' style={{color:'#1DA57A'}}/>)}
buttonColor="#FFFFFF"
position='right'
verticalOrientation='up'
size={34}
border='#1DA57A'
onPress={() => this.scrollview.scrollTo({x:0,y: 0,animated:true})}
/> : <View/>
}
