React Native:如何翻译Whatsapp for Android中的粘性标题？
React Native:如何翻译Whatsapp for Android中的粘性标题？
提问于 2016-08-20 23:43:16
我想创建一个粘性标题，就像在Android上的Whatsapp一样。我的方法，听scroll-event并立即移动标题，是卡顿的，Whatsapp中的方法非常流畅。并且ScrollView的所有退回都被转移到头部，这看起来很丑陋。理想的解决方案是先移动头部，然后在移动时终止pan响应器，这样底层的ScrollView就成为触摸事件的响应器--但这是不可能的。
你有什么建议让这一切变得完美吗？
这是我到目前为止尝试过的。将Animated.views与Animated.values一起使用不会有任何效果。
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>
);
}
}回答 1
Stack Overflow用户
发布于 2016-10-28 21:42:55
React Native的ScrollView默认支持粘性报头。如果你只想让特定的头固定，这可以通过使用stickyHeaderIndices来实现。
如果你想在安卓系统上的WhatsApp中滚动聊天时复制粘滞的date标题，可以使用ListView和ListViewDataSource的cloneWithRowsAndSections来实现。
有关更多信息，请查看RN's docs on ScrollView或在ListView上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39055940
复制相关文章
相似问题
腾讯云开发者
