gpt4 book ai didi

react-native - ReactNative - ScrollView 中的平面列表

转载 作者:行者123 更新时间:2023-12-04 04:38:01 28 4
gpt4 key购买 nike

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

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

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

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

我可以知道在 ScrollView 组件中实现 Flatlist 有哪些注意事项吗?

我试图创建零食,但它似乎没有加载远程图像

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

最佳答案

您将需要重构您的组件,使其看起来像这样:

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

关于react-native - ReactNative - ScrollView 中的平面列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52036638/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com