Question

我的主要组件视图是ScrollView，它有许多视图和一个呈现平面列表的组件。问题是我想向下滚动屏幕，当它到达结尾时，平面列表在哪里，开始滚动平面列表。我怎样才能做到这一点？

我有这样的事情：

<ScrollView>
        <View style={{flex:1}}>
            <Image>
                <View>  
                    <Text></Text>
                    <Text></Text>
                </View>
            </Image>
            <EventInfo/>
            <Text>  </Text>
            <Text>  </Text>
            <EventHeader/>
        </View>
        <EventGuests/>
</ScrollView>

EventGuests是呈现平面列表的组件。这种方式显示在整个列表中，并且滚动了所有屏幕。

Answer 1

执行此操作的最佳方法是使用FlatList的ListHeaderComponent prop。

You can check it here.

只需将高于FlatList的所有组件传递给FlatList header prop。这是ScrollView和FlatList滚动之间没有冲突的正确方法。

Answer 2

尝试在onScroll组件中使用ScrollView道具。我们可以用它来检测滚动屏幕的结尾。

const isReachedEnd = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 10;

  return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};

const renderEventGuests = () => {
  return (
    <EventGuests />
  );
};

render() {
  return (
    <ScrollView
      onScroll={({nativeEvent}) => {
        if (this.isReachedEnd(nativeEvent)) {
          this.renderEventGuests();
        }
      }}
      scrollEventThrottle={400} 
    >
      <View style={{ flex:1 }}>
        <Image>
          <View>  
            <Text></Text>
            <Text></Text>
          </View>
        </Image>

        <EventInfo />

        <Text></Text>
        <Text></Text>

        <EventHeader />
      </View>
    </ScrollView>
  )
}

参考：Detect ScrollView has reached the end

使用FlatList反应Native ScrollView

2 个答案: