react-native – React Native获取SectionList中的第一行

有没有办法在滚动时知道React Native的SectionList中当前的顶行？我想根据活动部分更改另一个组件. 我创造了一个例子.我不知道你如何使用react-native进行调试,但我使用 Reactotron进行调试.这里的诀窍是使用onViewableItemsChanged.我已经找到并应用了从 here获得帮助的解决方案.当视图更改时,可见项目列表保留在对象info.viewableItems上.第一项是屏幕上的可见项目.而且你也可以得到它属于哪个部分的项目.但是你应该知道,当粘性节头改变时,第一行将是节数据本身.我没有那么多反应原生的经验,但我希望这对你有所帮助.

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 }