react-native - React Native 在 SectionList 中获得顶行

Question

有没有办法在滚动时知道 React Native 的 SectionList 中的当前顶行？我想根据事件部分更改另一个组件。

Answer 1

我已经创建了一个示例。我不知道您如何使用 react-native 进行调试，但我使用 Reactotron用于调试。这里的诀窍是使用 onViewableItemsChanged。我找到并应用了从 here 获得帮助的解决方案.当 View 更改时，可见项目的列表会保留在对象 info.viewableItems 上。 .第一个项目是屏幕上的可见项目。你也可以得到它属于哪个部分的项目。但是您应该知道，当粘性节标题更改时，第一行将是节数据本身。我对 native react 没有太多经验，但我希望这对您有所帮助。

import React, {
   Component,
} from 'react';

import {
   Text,
   View,
   StyleSheet,
   SectionList,
} from 'react-native';

import Reactotron from 'reactotron-react-native';

const leagues = [
   { title: 'LEAGUE 1', data: ['psg', 'caen', 'monaco',], key: 1 },
   { title: 'BUNDESLIGA', data: ['schalke', 'leverkusen', 'hannover'], key: 2 },
   { title: 'SERIE A', data: ['juventus', 'napoli', 'roma'], key: 3 },
   { title: 'Super Lig', data: ['galatasaray', 'fenerbahçe', 'beşiktaş'], key: 4 },
];


class SectionListExample extends Component {
    constructor(props) {
        super(props);
    }

    renderHeader(headerItem) {
        return (
            <View style={{ backgroundColor: '#000000' }}>
                <Text style={styles.headerText}>{headerItem.section.title}
                </Text>
            </View>
        );
    }

    onRenderSectionHeader({ section }) {
        return <Text style={{ padding: 5, color: 'blue' }}>{section.title}
          </Text>
    }

    _onViewableItemsChanged = (
        info = {
            viewableItems: {
                key,
                isViewable,
                item: { columns },
                index,
                section
            },
            changed: {
                key,
                isViewable,
                item: { columns },
                index,
                section
            }
        },
    ) => {
        // const reducer = (accumulator, currentValue) => {
        //     if (accumulator) {
        //         if (accumulator !== currentValue) {
        //             Reactotron.log(currentValue);
        //             // Reactotron.log(viewableItems)
        //         }
        //     }
        //     else {
        //         return false;
        //     }
        // }
        // info.changed.reduce(reducer);

        // you will see here the current visible items from top to bottom...
        Reactotron.log(info.viewableItems);
    };

    render() {
        return (
            <View style={{ flex: 1 }} >
                <SectionList
                    sections={leagues}
                    renderItem={
                        ({ item }) => {
                            return <Text style={{ padding: 40, color: 'red' 
                        }}>{item}</Text>
                        }
                    }
                    renderSectionHeader={
                        this.onRenderSectionHeader
                    }
                    stickySectionHeadersEnabled
                    onViewableItemsChanged={this._onViewableItemsChanged}
                />

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#FFFFFF',
    },
    text: {
        fontSize: 20,
        color: 'black',
    },
    headerText: {
        fontSize: 30,
        color: 'red'
    }

});


export { SectionListExample }