0

我计划在移动设备中实现这一目标。使用平面列表。

它作为一个整体滚动

在此处输入图像描述

我试图在本机反应中创建它，我的代码看起来像这样

<Content nestedScrollEnabled
    style={{ flex: 1, backgroundColor: COLOR.LIGHT }}
    contentContainerStyle={{ flex: 1 }} // important!
>

<List>
    {!_.isEmpty(this.state.newNotif) ?
        <React.Fragment>
            <ListItem itemDivider>
                <Text style={{ color: '#333333', fontSize: 16 }}>New</Text>
            </ListItem>

            <FlatList

                ref="infiniteList"
                data={this.state.newNotif}
                keyExtractor={(x, i) => x.id.toString()}
                renderItem={(data) => this.renderNewNotifCard(data.index, data.item)}
            // onEndReached={({ distanceFromEnd }) => {
            //     console.log(distanceFromEnd);
            //     this.handleEnd()


            // }}
            // onEndReachedThreshold={0.5}
            />

        </React.Fragment>
        :
        null
    }
    {!_.isEmpty(this.state.earlierNotif) ?
        <React.Fragment>
            <ListItem itemDivider>
                <Text style={{ color: '#333333', fontSize: 16 }}>Earlier</Text>
            </ListItem>
            <FlatList

                data={this.state.earlierNotif}
                // onEndReached={() => this.reachedEndCallBack()}

                keyExtractor={(x, i) => x.id.toString()}

                onEndReached={({ distanceFromEnd }) => {
                    console.log(distanceFromEnd);
                    this.handleEnd()


                }}
                onEndReachedThreshold={0.5}
              
                renderItem={(data) => this.renderEarlierNotif(data.index, data.item)}
            />
        </React.Fragment>
        :
        null
    }
</List>

但似乎它没有滚动作为一个整体，它滚动每组平面列表。

我希望有人能帮助我。

4

1 回答 1

2

您应该使用SectionList部分标题 - https://reactnative.dev/docs/sectionlist

于 2020-09-07T06:54:12.300 回答