React Native: Как перевести липкий заголовок, как в Whatsapp для Android?

javascript android performance animation react-native

708 просмотра

1 ответ

Я хотел бы создать липкий заголовок, как в Whatsapp для 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>
    );
  }
}
Автор: Olli Источник Размещён: 08.11.2019 11:31

Ответы (1)


0 плюса

ScrollViewПо умолчанию React Native поддерживает липкие заголовки. Если вы хотите использовать только определенные заголовки, это можно сделать с помощью stickyHeaderIndices .

Если вы собираетесь дублировать липкие заголовки даты при прокрутке чата в WhatsApp на Android, это может быть достигнуто за счет использования ListViewи ListViewDataSource«s cloneWithRowsAndSections.

Для получения дополнительной информации, проверьте документы RN на ScrollView или на ListView .

Автор: NiFi Размещён: 28.10.2016 01:42
Вопросы из категории :
32x32