Question

我正在做一个项目，在该项目中，我允许用户将数字添加到SectionList中，并在页脚中汇总所有添加的数字。对于这种特殊情况，我需要SectionList向下滚动到最新数字。我正在努力做到这一点。

到目前为止，我发现的结果是通过scrollToLocation函数完成的，但这需要使用getItemLayout方法来计算要滚动到的单元格的框架。为此，我使用了this 函数，并遵循随附的tutorial on medium。

但是，每次我将数字添加到列表中时，它只能向下滚动到列表中倒数第二个项目，该项目已经部分显示。

我的渲染代码：

<View style={[styles.container, {width: this.props.tableWidth}]}>
                <SectionList 
                    ref={(sectionList) => {this.sectionList = sectionList}}
                    style={styles.scoreTable}
                    stickySectionHeadersEnabled={true}
                    renderItem={({item}) => this.renderItem(item)}
                    getItemLayout={this.getItemLayout}
                    renderSectionHeader={({section}) => this.renderheader(game, participation.participant)}
                    sections={[
                      { title:'Turns', data: turns }
                    ]}
                    keyExtractor={(item, index) => index.toString()}
                />
                <View style={{flex: 1, maxHeight: DefaultListItemHeight, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, backgroundColor: DartsColorsRed}}>
                    <Text style={{flex: 1, textAlign: 'center', textAlignVertical: 'center', fontSize: 22, color: 'white', fontWeight: '600'}}> {this.state.remainingScore} </Text>
                </View>
            </View>

我的getItemLayout，在此组件中全局定义：

getItemLayout = sectionListGetItemLayout({
    getItemHeight: (rowData, sectionIndex, rowIndex) => DefaultListItemHeight,
    // These three properties are optional
    getSeparatorHeight: () => 0,
    getSectionHeaderHeight: () => MediumListItemHeight,
    getSectionFooterHeight: () => DefaultListItemHeight
})

我在分数处理功能中的滚动逻辑：

var turnIndex = turns.lastIndexOf(turn)
     this.sectionList.scrollToLocation({
         sectionIndex: 0,
         itemIndex: turnIndex,
         viewPosition: 0,
      });

我觉得这里的错误是SectionList中的索引与Flatlist中的索引不同，但是我在文档中找不到类似的内容

问题：：如何让我的SectionList滚动到当前超出SectionList组件范围的最后一项？

Answer 1

显然这是React-Native 0.59.6中的错误。

在android上，当在setState的完成块中工作时，需要将超时设置为0.2秒，然后，SectionList将一直向下滚动。但是，原本应该存在的项目尚未渲染，有时会在0.5秒后出现，从而给人以笨拙的感觉。

我发布了一个问题Here，希望它会尽快解决

Answer 2

我认为这个问题要简单得多，而且与您的风格有关。

您要求列表包含height: Dimensions.get('window').height - 50，但由于您无法确定SectionList的高度，因此此行不执行任何操作。

因此您可以删除它并添加边距：

list: {
  top: 50,
  marginBottom: 50,
},

React-Native SectionList滚动到超出范围的项目

2 个答案: