Question

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

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

我的父视图包含flex: 1以及我的SectionList

环境
工作环境：MacOS Sierra 10.13.3
世博会版：23.0
React Native版本：0.50
反应：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（我试图在每次光标移动时滚动），我们可以看到滚动仅在我超过某个高度时触发。

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

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

Answer 3

我在顶部的marginBottom所消耗的SectionList等量的View上添加了$ export $(grep -v '^#' .azure-env | xargs)，以均衡面积。

使用SectionList React Native滚动区域太小

3 个答案: