SectionList React Native 滚动区域太小答案

【问题标题】：Scroll area too small with SectionList React NativeSectionList React Native 滚动区域太小
【发布时间】：2018-09-09 05:41:49
【问题描述】：

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

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

我的父视图有 flex: 1 以及我的 SectionList

环境
工作环境：MacOS Sierra 10.13.3
世博版：23.0
React Native 版本：0.50
反应：16.0
使用 iPhone 8 模拟
安卓没有问题

复制步骤
在视图中创建 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 动图（每次光标移动时我都在尝试滚动），我们可以看到只有当我高于某个高度时才会触发滚动。

GIF

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

提前谢谢你。

【问题讨论】：

你找到解决办法了吗？
@Lazy 我遇到了相同或非常相似的问题。此错误仅在 iOS 上，Android 运行良好。经过大量试验和错误后，我发现（可能的）罪魁祸首实际上是stickySectionHeadersEnabled。当设置为false 时，一切正常。请记住，它在 iOS 上默认启用。我会尽量准备一个最小的repro。
@Clonescody 你在某个地方有这个错误的最小工作示例吗？也许在snack.expo.io？
@szalski 不，不幸的是，这是我的应用程序的旧版本，几个月前我们重新设计了所有内容。抱歉回复晚了，希望您能纠正您的问题

标签： javascript ios react-native mobile react-native-sectionlist

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

// 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 的定义位置以及它有多少个父母，我认为它只需要一个

希望这会有所帮助。

【讨论】：

【解决方案3】：

我在SectionList 上添加了一个marginBottom，它与顶部的View 占用的空间相等，以平衡该区域。

【讨论】：