react-native - ReactNative - 滚动视图中的平面列表

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

标签： react-native

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>
    );