Question

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

Answer 1

我创建了一个例子。我不知道如何使用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 }

React Native获取SectionList中的第一行

1 个答案: