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

<平面列表 nestedScrollEnabled ... />

你在这里。

ReactNative-ScrollView中的平面列表

2 个答案: