2

我目前正在尝试<SectionList>在 classic中使用 a <View>，我的所有数据都已格式化，列表正确显示并且我的项目的操作正在运行。

问题是，当我在 SectionList 的顶部时，可用于触发滚动的区域实际上非常小（距列表顶部大约 100 个像素）。但是，一旦我从该区域向下滚动一点，整个列表就会变得可滚动并按预期工作，直到我滚动回顶部。

我的父视图flex: 1和我的 SectionList 一样

环境
工作环境：MacOS Sierra 10.13.3
Expo 版本：23.0
React Native 版本：0.50
React：16.0
使用iPhone 8 模拟
Android 上没有问题

重现
视图内 SectionList 的经典创建的步骤

预期行为
必须从 SectionList 中的任何位置触发滚动

实际行为
当 SectionList 位于顶部时，滚动只在一个小区域内触发（距离列表顶部大约 100px）

我的 SectionList 的代码：

<View style={{ flex: 1 }}>
      <SectionList
        style={styles.openSectionList} // flex: 1
        scrollEnabled
        stickySectionHeadersEnabled
        sections={this.sections}
        keyExtractor={item => item["@id"]}
        removeClippedSubviews
        renderSectionHeader={({ section }) => (
          <TouchableHighlight
            onPress={() => this.onSectionHeaderPressRef(section.index)}
            activeOpacity={0.65}
            underlayColor="rgba(0, 0, 0, 0.2)"
            style={styles.sectionHeader}
          >
            <View style={styles.categoryContentContainer}>
              <View style={styles.firstPartContent}>
                <Text style={styles.categoryHeaderText}>
                  {section.title === "Autres"
                    ? "Mes produits"
                    : section.title}{" "}
                </Text>
                {section.nbItems - section.nbItemsSelected === 0 ? (
                  <CheckBox
                    label=""
                    checked
                    checkboxStyle={styles.checkbox}
                    checkboxContainer={styles.checkboxContainer}
                  />
                ) : (
                  <Text
                    style={[
                      styles.categoryHeaderText,
                      { color: Colors.contrastColor },
                    ]}
                  >
                    ({section.nbItems - section.nbItemsSelected})
                  </Text>
                )}
              </View>
              <Image
                source={require("../../../assets/common/chevron.png")}
                style={
                  section.index === this.state.currentCategoryOpen
                    ? styles.categoryChevronOpen
                    : styles.categoryChevronClosed
                }
              />
            </View>
          </TouchableHighlight>
        )}
        renderItem={({ item }) =>
          this.state.currentCategoryOpen === item.categoryIndex ? (
            <ShoppingListProduct
              key={item["@id"]}
              ingredient={item}
              updateIngredient={this.updateIngredientListRef}
              onLongPress={this.itemLongPressedRef}
            />
          ) : null}
      />
  </View>

实际行为的 GIF（我试图在每次光标移动时滚动），我们可以看到滚动仅在我高于某个高度时触发。

动图

任何帮助将不胜感激，因为我不知道这是否是错误和/或我错误地实现了组件。

提前谢谢你。

4

3 回答 3

0

我可以通过将此道具添加到部分列表来修复我的问题 stickySectionHeadersEnabled={false}

于 2020-09-11T10:16:13.020 回答
0

有人通过电子邮件问我解决方案，所以我不妨在这里添加它，据我所知，这是组件的位置/重叠问题。

我不记得确切但我最终得到了这段代码（我的页面内容发生了变化，所以这就是为什么它被设置为变量）

// render method

component = ( <SectionList
     style={styles.openSectionList} // flex: 1, height: "100%"
     scrollEnabled
     stickySectionHeadersEnabled
     sections={this.sections}
     bounces={false}
     keyExtractor={item =>
         item["@id"] === undefined ? item.userIngredient : item["@id"]
     }
     getItemLayout={this.getItemLayout}
     renderSectionHeader={this.renderSectionListHeaderRef}
     renderItem={this.renderSectionListItemRef}
 /> )

 return (
        <View style={{ flex: 1 }}>
            {component}
        </View>
 )

所以是的，请注意您的 SectionList 的定义位置以及它有多少个父母，我认为它只需要一个

希望这可以帮助。

于 2019-04-02T15:33:38.420 回答
-1

我在顶部消耗的等量空间中添加了一个marginBottom以均衡区域。SectionListView

于 2019-02-13T06:30:00.660 回答