react-native-scrolltotop 回到顶部－组件 （ios/android）

react-native-scrolltotop

https://github.com/yzsolo/react-native-scrolltotop

a RN component make list come back to top.

IOS
&& ANDROID

 －－－ 

Installation

npm install --save react-native-scrolltotop

Usage
example

see the example/example.js for a more detailed example.

import ScrollTopView from 'react-native-scrolltotop';

//first set default state in your constructor
constructor(props) {
//...
this.state = {
isShowToTop: false,
};
}

//then bind a method to detect the scroll distance of your listView
//set ref with 'listview'
<ListView
ref="listview"
onScroll={(e)=>this._onScroll(e)}
style={styles.listView}
renderScrollComponent={(props)=>{
return <ScrollView style={styles.ViewPort} {...props}/>
}}/>

//here is the _onScrol method
_onScroll(e) {
var offsetY = e.nativeEvent.contentOffset.y;

if(offsetY > 100) {
this.setState({
isShowToTop: true
})
} else {
this.setState({
isShowToTop: false
})
}
}

//use it with your listView together
<View style={{flex:1}}>
<View style={styles.header}>
<Text style={styles.headerText}>消息列表</Text>
</View>
{listView}
{this.state.isShowToTop?<ScrollTopView root={this} ></ScrollTopView>:null}
</View>