ReactNative - ScrollView 中的平面列表

Question

我希望在 React Native 中使用这个包，这是一个用 Flatlist 实现的轮播，并允许水平滑动来滑动图像。

https://github.com/gusgard/react-native-swiper-flatlist

发生的事情是我想在 ScrollView 中使用它，因为我的屏幕很长并且需要垂直滚动。

但是，如果我在 ScrollView 中使用此包，则不会加载图像和组件。 如果我使用 View 而不是 ScrollView，一切正常，图像加载。

请问在ScrollView组件中实现Flatlist需要注意什么？

我尝试制作零食，但它似乎无法加载远程图像

https://snack.expo.io/@daveteu/scrollflatlist-test

Answer 1

您需要将组件重组为如下所示：

<View>
  <ScrollView removeClippedSubviews={false}>
    <View>
      <SwiperFlatList>
      </SwiperFlatList>
    </View>
    //Your other stuff go here that need scrollview
  </ScrollView>
</View>

完整代码示例：

  render() {
    return (
      <View>
        <ScrollView removeClippedSubviews={false}>
          <View style={styles.container}>
            <SwiperFlatList
              autoplay
              autoplayDelay={2}
              autoplayLoop
              index={2}
              showPagination
            >
              <View style={[styles.child, { backgroundColor: 'tomato' }]}>
                <Text style={styles.text}>1</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'thistle' }]}>
                <Text style={styles.text}>2</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
                <Text style={styles.text}>3</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'teal' }]}>
                <Text style={styles.text}>4</Text>
              </View>
            </SwiperFlatList>
          </View>
          ...// Your components that require scrolling go here
        </ScrollView>
      </View>
    );

Answer 2

<Flatlist nestedScrollEnabled... />

干得好。