react-native - 使用 React Native 的 FlatList 的 Swiper

标签 react-native react-native-flatlist

我想让我的水平 FlatList(启用分页)向左或向右滚动,使内容始终位于屏幕中央,并且下一个和上一个内容仍然出现。

像这样(对于水平 Action )enter image description here

但不幸的是,当平面列表滚动时,滚动的长度与平面列表或其父级的宽度相同,无法达到我想要的效果。
print of the app

最佳答案

我们公司有类似的需求,但现有的插件都没有完全满足我们的用例。我们最终创建了自己的并将其开源: react-native-snap-carousel .

该插件现在建立在 FlatList 之上(版本 >= 3.0.0)并提供 预览 (你所追求的效果),捕捉效果 , 视差图像 , RTL 支持 , 和更多。

你可以看看showcase了解它可以实现的目标。如果您决定尝试一下,请随时与我们分享您的反馈;我们一直在努力改进它。

react-native-snap-carousel archriss showcase
react-native-snap-carousel archriss aix

编辑:two new layouts已在版本 3.6.0 中引入(一个有一堆卡片效果,另一个有类似火种的效果)。享受!

react-native-snap-carousel stack layout
react-native-snap-carousel tinder layout

关于react-native - 使用 React Native 的 FlatList 的 Swiper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44337251/

相关文章:

reactjs - StackNavigator 内嵌套 TabNavigator : controlling the header

objective-c - 如何从 native 代码访问 React Native Assets

javascript - React Native - FlatList 排序而不排序数据

css - 使用 react-native-web FlatList 的自定义 CSS 滚动条

react-native - 制作一个多列 FlatList,其中渲染项目的高度与其旁边的高度不匹配

react-native - 使用 FlatList#onViewableItemsChanged 调用组件函数

javascript - 对象在 React 中无效

javascript - 根据登录状态使用 React-Native-Router-Flux 显示不同的组件

javascript - 哪个导航栏?

React-Native:上拉时未调用 FlatList onRefresh。