Question

我想创建一个像Whatsapp for Android中那样的粘贴标题。我的方法，听滚动事件并立即移动标题，是口吃，Whatsapp中的那个是非常流畅的。并且ScrollView的所有反弹都转移到标题，看起来很难看。理想的解决方案是首先移动标头并在移动时终止平移响应器，以便底层的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>
    );
  }
}

Answer 1

默认情况下，React Native的ScrollView支持粘性标头。如果您只想使用某些标题，可以使用stickyHeaderIndices。

来完成

如果您打算在Android上的WhatsApp中滚动聊天时复制粘性日期标题，可以使用ListView和ListViewDataSource的{{1}}来实现。

有关详细信息，请查看RN's docs on ScrollView或ListView。

React Native：如何翻译Whatsapp for Android中的粘贴标题？

1 个答案: