react-native - 如何在 scrollView 中显示相邻的卡片?

标签 react-native

我正在尝试在 react native 中实现一个 swiper,其中卡片水平排列,用户可以向左/向右滑动以查看来自相邻边缘的下一张卡片。

类似的东西 http://www.idangero.us/swiper/#.VmFqdeN95E4

我有一个 ScrollView ,每张卡片的宽度都等于设备宽度,因此可以滑动每张卡片以显示下一张/上一张卡片。

但是我怎样才能在同一个视点中显示相邻的卡片呢?

scrollView 中是否有任何 Prop 可以实现这一点? (如果 pagingEnabled 使用 snapToInterval 和 snapToAlignment 效果不佳)

最佳答案

假设您使用的是 iOS,您可以组合 ScrollView 属性 snapToInterval={somethingSmallerThanDeviceWidth}snapToAlignment来创造这种效果。当然,卡片需要小于设备宽度。

我创建了一个 RNPlay example using this technique :

RNPlay preview

关于react-native - 如何在 scrollView 中显示相邻的卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34086480/

相关文章:

javascript - react native : Using "setState" within Promise

javascript - 使用 async 和 await with export const

reactjs - react-native - <View> 或 <> 有什么不同?

javascript - 在给定(x,y,z)陀螺仪的情况下,如何检测设备旋转 360 度?

android - React Native : What is returned by Auth. 登录()?

android - 在自定义广播接收器中从推送通知打开时 react native 应用程序崩溃

javascript - 无法将 mst 模型数据从一个模型复制到另一个模型

react-native - "Running application "App"with appParams"在 React Native 中是什么意思?

javascript - 数组或迭代器中的每个子项都应该有一个唯一的 key prop - 但我确实定义了一个 key prop

react-native - React Native map UrlTile