使用 FlatList 反应原生 ScrollView答案

【问题标题】：React Native ScrollView with a FlatList使用 FlatList 反应原生 ScrollView
【发布时间】：2017-08-22 15:28:33
【问题描述】：

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

我有这样的事情：

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

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

【问题讨论】：

标签： javascript android react-native

【解决方案1】：

最好的方法是使用 FlatList 的 ListHeaderComponent 属性。

You can check it here.

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

【讨论】：

一旦您尝试调用滚动方法，就会出现问题，因为HeaderComponent 将具有不可预测的高度。因此getItemLayout 将不准确。

【解决方案2】：

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

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

【讨论】：

没用。但已经解决了：图像破坏了一切。不知道为什么
@thomas12 你能分享一下你最终是如何解决它的吗？