使用SectionList React Native滚动区域太小

Question

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

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

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

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

重现步骤 在View内部经典创建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

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

提前谢谢你。

Answer 1

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

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

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

希望这可以帮助。

Answer 2

我向marginBottom添加了一个SectionList，其中View在顶部消耗了相等的空间以均衡该区域。