首先引入github一个库,react-native-action-button,这是一个悬浮按钮的组件。
既然我们要点击按钮回到顶部,肯定不是希望滑到最下面才出现这个按钮,肯定希望滚动条滑动,这个按钮也一直固定在这里
这时候就要注意,ActionButton不能放在ScrollView这个标签里面,否则只能到最底部才会显示,给ScrollView最外层加一层View标签,View标签得设置style={{flex:1,backgroundColor:'#fff'}},否则是不显示内容的。然后ScrollView标签和ActionButton标签都放在View里面去。
首先要设计状态
state={
isTop:false
}
ScrollView标签里面有OnScroll方法也就是滑动就触发这个方法,并且要写一个ref,后期跳转到顶部可以直接拿过来用
<ScrollView
onScroll={this._getBackTop}
style={{flex:1,backgroundColor:'#fff'}}
ref={(r) => this.scrollview = r}
>
</ScrollView>
这里我写的判断,是根据我需求滑到多少距离就显示,可以自己打印一下,而确定高度
_getBackTop = (e) => {
let offsetY = e.nativeEvent.contentOffset.y; //滑动距离
if(offsetY > 720){
this.setState({
isTop : true
})
}else{
this.setState({
isTop:false
})
}
}
这时候就可以显示了,然后点击滑到顶部自然也很简单,这里的renderIcon里面放的是引入的图标,我用的是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/>
}