react-native点击按钮回到顶部

首先引入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/>
}