问题标签 [react-swipeable-views]

我在 React 应用程序中有一个 Flexbox 容器，带有flex-direction: row. 容器包含两个瓷砖，都带有flex: 1. 每个占宽度的 50%，如下图所示。这是意料之中的。

但是，当组件的状态发生变化，只Tile 1渲染时，它仍然只占据 50% 的宽度，并没有扩大到占据整个宽度。当我稍微摆动浏览器窗口时，Tile 1会扩展到全宽。请注意，在窗口调整大小期间组件的状态没有改变，只是图块现在占据了整个宽度。我在想我可能遇到了一些 React + Flexbox 错误。任何想法这可能是什么？

不幸的是，我无法用一个最小的例子重现这个问题。这是完美运行的最小示例的实时版本！源代码在这里。

渲染的 HTML 和 CSS 实际上很简单，如下所示：

实际代码使用react-measure和react-swipeable-views进一步包装，但我认为这些不会导致问题。

我正在寻找使用可堆叠卡片构建用户界面，例如：

如果有动态数量的卡片是当前活动的卡片，并且随着顶部卡片的消失，将显示下面的卡片。非常类似于 Tinder 的可滑动体验。

我需要在我的 React 网络应用程序（不是本机）中构建这个 UI 组件。我发现这个库看起来很受欢迎：

https://github.com/oliviertassinari/react-swipeable-views

然而，这个库似乎不支持堆叠视图，并以如下所示的偏移量显示所有视图。

有谁知道是否有可能通过 react-swipeable-views 完成我正在寻找的东西，或者是否有更好的库来完成图像中看到的 UIC？

我正在使用 SwipeableViews 和映射元素从数组中显示。每次用户向左或向右滑动时，我想从数组中删除滑动元素并显示没有滑动元素的新元素。第一个元素是一张永远不应该被移除的卡片，然后我通过数组映射，那时我希望能够移除用户刷过的值。到目前为止，这是我的代码。

//onswipe 函数

返回

目前

SwipeableViews 的新更新允许 MaterialUI 选项卡组件中的每个选项卡都有自己的高度。让我后退一点。之前，MaterialUI Tabs 组件将在最长选项卡的高度显示所有选项卡。这在不需要的选项卡上创建了不必要的滚动。SwipeableViews 最近通过将其添加到其组件来解决此问题

和

这解决了加载状态下选项卡的高度问题。但是当项目被隐藏并通过点击事件显示时，高度仍然存在并且显示的项目不显示（被从视图中截断）

查看图片（imgur 无法加载图片）查看图片链接

图片

我正在做一个项目，我在创建刷卡效果并且npm run start:dev在应用程序上运行时编译失败

文档可以在这里找到

我有一个 ClojureScript 项目，使用shadow-cljs. 在这个项目中，我使用的是 NPM 包@material-ui，它工作正常。

现在我想使用react-swipeable-views。因此，我扩展了我的package.json：

当我尝试要求时，["react-swipeable-views" :as sv]我从 shadow-cljs 收到此错误：

所需的 JS 依赖项“dom-helpers/transition/properties”不可用，它是“node_modules/react-swipeable-views/lib/SwipeableViews.js”所需的。

而事实上transition，node_modules/dom-helpers/. 但是里面import transitionInfo from 'dom-helpers/transition/properties';有node_modules/react-swipeable-views/src/SwipeableViews.js。

它看起来像一个依赖错误react-swipeable-views，但我是 NPM 的新手。

有什么建议吗？或者如何调试？

更新

它的接缝react-swipeable-views取决于过时的dom-helpers@3.4.0而shadow-cljs使用当前的dom-helpers@5.1.3. 见https://github.com/oliviertassinari/react-swipeable-views/issues/542

可以同时使用吗？还是我必须等到有人修复react-swipeable-views？

我正在尝试react-swipable-views在我的反应应用程序中使用。我收到以下错误：- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我已按如下方式导入它：

import SwipeableViews from "react-swipeable-views";

用法：

如何解决此错误？

我正在使用：react-native，expo，

反应原生手势处理程序/可滑动

这是屏幕代码https://github.com/ArturScwaiberov/react-native-dental-app/blob/master/screens/HomeScreen.js

在我的应用程序中有由 SectionList 呈现的约会列表。

在 renderItem 我创建了两个按钮，其中一个是删除项目。

所以，我不明白我应该如何将约会 ID 传递给 renderRightActions 来删除或编辑这个当前的约会。请帮我找出解决方案！

这是我的 HomeScreen 代码审查：

我正在使用react-swipeable-views，@material-ui/core/Tab并且@material-ui/core/Tabs

我正在根据选项卡调整视图这是我的代码

每个组件都有一个独立的带有 API 调用的 UI，The Problem is when this component loads it loads all other tabs including the API Call even without taping any other tap

简而言之：加载此组件时加载一次所有选项卡

所以我希望每个组件在我选项卡时独立加载，而当我按下某个水龙头时其他组件应该卸载

我正在使用 React Js 和 Swiper Js 来获得与 LINK 相同的效果。但由于某种原因，我无法在其中实现任何效果或分页。

我的组件文件夹中有 Card.js：

我尝试使用 this.swiper 初始化仍然没有锻炼。

我的CSS有：

它仅以幻灯片的形式出现在彼此相邻的图像上，没有应用任何效果。滑动时没有覆盖流效果。我是否错过了任何进口或我做错了什么。谁能帮我解决这个问题。

它在独立的 html 页面中运行良好。