react native回到顶部

import React, { Component } from 'react';
import {
View,
Animated,
Easing,
ScrollView,
Button
} from 'react-native';
class Sub extends Component {
shouldComponentUpdate(nextProps){
if(nextProps.top !== this.props.top){
this.ScrollView.scrollTo({ y: nextProps.top, animated: false})
}
return true
}
ScrollView
render() {
const {AnimatedData} = this.props
return (
<ScrollView onScroll={(e)=>{
const {y} = e.nativeEvent.contentOffset
AnimatedData.ScrollTop.setValue(y)
}} ref={(ref)=>{this.ScrollView = ref}} style={{height: 600}}>
<View style={{backgroundColor: "red", height: 200}}></View>
<View style={{backgroundColor: "blue", height: 200}}></View>
<View style={{backgroundColor: "red", height: 200}}></View>
<View style={{backgroundColor: "blue", height: 200}}></View>
<View style={{backgroundColor: "red", height: 200}}></View>
<View style={{backgroundColor: "blue", height: 200}}></View>
<View style={{backgroundColor: "red", height: 200}}></View>
<View style={{backgroundColor: "blue", height: 200}}></View>
</ScrollView>
);
}
}
const ABC = Animated.createAnimatedComponent(Sub)
class App extends Component {
AnimatedData = {
ScrollTop: new Animated.Value(100)
}
render() {
return (
<View style={{flex: 1}}>
<Button title={"Top"} onPress={()=>{
Animated.timing(this.AnimatedData.ScrollTop,{
toValue: 0,
duration: 200,
easing: Easing.linear
}).start()
}}/>
<ABC top={this.AnimatedData.ScrollTop} AnimatedData={this.AnimatedData}/>
</View>
);
}
}
export default (App);