React native 获取SectionList中的第一行

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

我创建了一个示例。我不知道如何使用react native进行调试，但我使用react native进行调试。这里的技巧是使用onViewableItemsChanged。我已经找到并应用了解决方案，并从中获得了帮助。当视图更改时，可见项列表将保留在object

info.viewableItems

上。第一项是屏幕上的可见项。你也可以得到它所属的部分。但是您应该知道，当粘性节标题更改时，第一行将是节数据本身。我对react native没有太多经验，但我希望这对您有所帮助

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 }

import-React{
组成部分，
}从"反应",；
进口{
文本，
看法
样式表，
章节列表，
}从“反应本机”；
从“Reactotron react native”导入Reactotron；
常量联盟=[
{标题：'LEAGUE 1'，数据：['psg'，'caen'，'monaco'，]，关键字：1}，
{标题：'德甲'，数据：['沙尔克'，'勒沃库森'，'汉诺威']，键：2}，
{标题：“意甲”，数据：[“尤文图斯”、“那不勒斯”、“罗马”，关键字：3}，
{标题：'超级Lig'，数据：['galatasaray'，'Fenebahçe'，'beşiktaş']，关键字：4}，
];
类SectionListExample扩展组件{
建造师（道具）{
超级（道具）；
}
渲染器（headerItem）{
返回(
{headerItem.section.title}
);
}
onRenderSectionHeader（{section}）{
返回{section.title}
}
_onViewableItemsChanged=(
信息={
可查看项目：{
钥匙
可视，
项目：{columns}，
指数
部分
},
更改：{
钥匙
可视，
项目：{columns}，
指数
部分
}
},
) => {
//常数减速机=（累加器，当前值）=>{
//if（蓄能器）{
//if（累加器！==当前值）{
//Reactotron.log（当前值）；
////reactoron.log（可视项）
//         }
//     }
//否则{
//返回false；
//     }
// }
//信息更改。减少（减速器）；
//您将在这里看到从上到下的当前可见项。。。
Reactotron.log（信息可查看项）；
};
render（）{
返回(
{
返回{item}
}
}
renderSectionHeader={
此.onRenderSectionHeader
}
StickySectionHeaders已启用
onViewableItemsChanged={this.\u onViewableItemsChanged}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#FFFFFF”，
},
正文：{
尺寸：20，
颜色：'黑色'，
},
标题文字：{
尺寸：30，
颜色：“红色”
}
});
导出{SectionListExample}