问题标签 [react-native-snap-carousel]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
345 浏览

react-native - react-native-snap-carousel 堆栈布局在 iOS 和 Android 上活动不同

我正在使用 react-native-snap-carousel 堆栈布局,它们的行为是相反的。当视图呈现时,在 iOS 上,第一个项目下有两个项目;然而,在 Android 上,索引 0 项下没有项快照。是否有任何属性可以将它们的行为设置为完全相同? 在此处输入图像描述

0 投票
0 回答
1225 浏览

javascript - react-native-snap-carousel中的分页点动画?

我从来没有做过任何动画,而且我是 javascript 新手。所以我想问的是甚至可以制作一些简单的动画,例如淡入淡出活跃和不活跃的点 react-native-snap-carousel?我正在使用我的自定义点:

https://streamable.com/snah0

我可以为类似于这个的点做一些动画吗,不要介意这条线,我不需要它。我感兴趣的是点的淡出动画的平滑淡入淡出: 例子

0 投票
3 回答
2355 浏览

image - 如何创建多个图像轮播?

我对 React Native 有点陌生,我正在尝试使用 Flatlist 创建一个卡片列表,我想为每张卡片显示几个图像作为轮播,我正在尝试使用 react-native-snap-carousel ,问题是当我滚动一张卡片时,所有卡片的索引都会移动。

如何为每张卡获取单独的索引?

索引有一种圆圈样式,当你转到下一个时,会改变颜色以指示还剩多少,它们都同时移动

0 投票
0 回答
1187 浏览

react-native - react-native-video 播放器进入缓冲模式,需要很长时间才能加载视频。我正在使用 snap carousel 库

我将 react-native-video 与 react-native-snap-carousel 一起使用,因为我想像 tik-tok 一样显示带有垂直滚动的全屏视频。有时视频会进入缓冲模式并需要很长时间才能加载视频,有时它不会加载,如果我在两者之间滚动,则其他视频会停止加载。谁能告诉我如何解决它。滚动时释放视频会起作用吗?如果是,我该如何发布视频播放器。如果视频处于缓冲模式并且加载时间很长,有什么办法可以解决它(可能是暂停/播放视频)。当它进入缓冲模式时,我记录了它,但几次后日志没有打印,甚至没有错误。

0 投票
1 回答
283 浏览

react-native - 当用户单击后退箭头图像按钮时,进度条指示器在本机反应中不会减少

我想实现这个功能当用户点击后退箭头图像按钮时,进度条指示器会减少,它会在轮播中显示以前的问题。

我正在使用“react-native-snap-carousel”来显示问题和答案的数据,并使用“react-native-progress-bar-animated”来显示 react-native 中的进度条指示器。

请帮助我如何实现此功能。我是 react-native 的新手。在此先感谢您。 在此处输入图像描述

这是一些易于理解的代码

0 投票
1 回答
1437 浏览

react-native - 如何使用 react-native-snap-carousel 正确对齐轮播?

我正在尝试将旋转木马的末端向右对齐。

这就是我定义轮播的方式:

通过该属性activeSlideAlignment="start",我能够将旋转木马的起点向左对齐。但是,如果我滚动到最后,最后一项将在左侧对齐(与第一项相同的位置)。我想保留最后一项,就像 FlatList 一样。

当前行为: 当前行为

我想避开那些空位。

我正在使用 React Native 0.62.2 和 react-native-snap-carousel 3.9.0。

0 投票
1 回答
291 浏览

reactjs - 在使用 react-native-snap-carousel 时根据内容大小设置 itemHeight(用于垂直轮播)?

我正在尝试使用 react-native-snap-carousel 实现垂直轮播。我想要实现的是一个垂直轮播,其轮播高度根据内容而异。根据 react-native-snap-carousel itemHeight 和 sliderHeight 的文档是垂直转盘时需要。那么有没有我可以根据内容大小实现 itemHeight 的?

0 投票
3 回答
3447 浏览

javascript - 在轮播中反应原生视频

我一直在尝试从包含多个视频和图像的滑块播放单个视频。我使用和尝试的内容如下。 1. react-native-video, 2. react-native-snap-carousel

如何暂停和播放包含在水平轮播中的视频以及垂直 FlatList Feeds 中的视频

这是我的旋转木马:

我的 _renderItem 在这里:

我的数组看起来像这样:

我不想显示玩家控制,这就是我隐藏它的原因……就像 Instagram 一样。我不知道我是否应该使用这个

目前的问题是:我应该只播放位于 FlatList 中的用户眼睛可见部分的视频(我没有提到我的 flatList 代码,因为它只是 list_design)。我有多个对象的滚动列表,其中包含数组中的媒体数据。 当其他 id 号 3 的媒体处于活动状态时,我如何设法停止播放具有 id 2 或 4 活动视频索引的数据数组的 id 号 1 对象。

在此处输入图像描述

我只想实现与 Instagram 帖子一样的效果,而不会出现性能滞后问题。谁能建议或帮助我实现这一目标。

0 投票
1 回答
3992 浏览

javascript - 如何在 react-native-snap-carousel 中使轮播循环?

我有一个简单的轮播,里面有 5 张图片。到达第五张图片后,我希望它转到第一张图片并重新开始。我试图通过阅读文档来解决它,但我看不到任何可以帮助的东西。我也试过在网上找一些例子,但找不到。

这是我的 package.json 文件

自动滚动工作正常。

0 投票
0 回答
387 浏览

react-native - 项目垂直滚动干扰轮播水平滚动(仅限 Android)

我有一个轮播(使用react-native-snap-carousel),其中每个项目都是一张卡片,它有一个标题和一个 WebView。在 Android 上,当尝试滚动加载到 webview 中的网页时,Carousel 的手势处理程序大部分时间都会首先被触发。在 iOS 上,一切正常。

因此,在 Android 上,几乎不可能在不触发水平 Carousel 滚动的情况下垂直滚动网页。

我创建了一个小型演示项目,您可以在其中看到问题

https://github.com/dudeinthemirror/carousel-example

问题是:有没有办法为 Android 修复这种行为?谢谢你的时间