我想创建一个像在Whatsapp的Android粘头。我的方法是听滚动事件,然后立即移动页眉,但这个方法很不流畅,Whatsapp的方法非常流畅。ScrollView的所有反弹都被转移到header,看起来很丑。理想的解决方案是先移动标题,并在移动时终止平移响应器,以便底层的ScrollView成为触摸事件的响应器-但这是不可能的。
你有什么建议使它更完美吗?这是我到目前为止所尝试的。使用动画。视图与动画。
class scrollHeader extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: 0
};
this.lastY = 0;
}
handleScroll(e) {
let dy = e.nativeEvent.contentOffset.y - this.lastY;
let scrollY = this.state.scrollY + dy;
scrollY = Math.min(scrollY, 80);
scrollY = Math.max(scrollY, 0);
this.setState({
scrollY: scrollY
});
this.lastY = e.nativeEvent.contentOffset.y;
}
render() {
const s = StyleSheet.create({
container: {
flex: 1
},
menu: {
position: 'absolute',
height: 160,
top: this.state.scrollY * -1,
left: 0,
right: 0,
backgroundColor: '#075e55',
zIndex: 1,
paddingTop: 40
},
text: {
fontSize: 16,
padding: 20
},
content: {
paddingTop: 160
}
});
return (
<View style={s.container}>
<StatusBar translucent backgroundColor={'#06544c'} />
<View style={s.menu}><Text>{'Menu Header'}</Text></View>
<ScrollView style={s.content} onScroll={(e) => this.handleScroll(e)}>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
<Text>{'Test'}</Text>
</ScrollView>
</View>
);
}
}
React Native的ScrollView
默认支持粘贴头。如果您只想保留特定的标题,可以使用stickyHeaderIndices来实现。
如果你想在Android上的WhatsApp上滚动聊天时复制粘性日期标题,这可以通过使用ListView
和ListViewDataSource
的cloneWithRowsAndSections
来实现。
要了解更多信息,请查看RN的ScrollView或ListView文档