问题标签 [react-native-scrollview]

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 投票
1 回答
1087 浏览

react-native - 如何使用 react-native ScrollView.scrollTo() 防止过度滚动?

在用户执行某些操作后,我想滚动到 ScrollView 中的特定部分,我正在使用以下代码执行此操作:

问题是“detailsView”视图靠近 ScrollView 的底部,在最大的 iPhone 上,scrollTo() 最终滚动到 ScrollViews“自然”最大滚动点的底部,您可以看到 ScrollViews 背景颜色(深灰色)好像您使用触摸手势过度滚动... ScrollView 中的组件具有绿色背景色。

有没有人建议在使用 ScrollView.scrollTo() 函数时如何防止这种“过度滚动”?

反应原生:v0.36

在此处输入图像描述

0 投票
9 回答
65885 浏览

react-native - 检测 ScrollView 已到尽头

我在 a 中有一个Text长文本ScrollView,我想检测用户何时滚动到文本末尾,以便我可以启用一个按钮。

我一直在从onScroll事件中调试事件对象,但似乎没有任何可以使用的值。

0 投票
2 回答
5005 浏览

react-native - 如何在 ScrollView 或 ListView 上保持位置?

当你在 ReactNative 应用中使用 ScrollView 或 ListView 并且有一些新数据进来时,它们的默认行为是保持在 Scroll 组件中的位置。这意味着如果在 ScrollView 的中间有新的高度为 20 的数据进来,屏幕上的项目会滑动 20,有时它会离开屏幕。

有没有办法保持/跟踪位置?例如,如果有新的高度为 20 的数据进来,则 position 会自动将位置调整 20,以使当前屏幕上的项目保持在屏幕上。提前致谢。

0 投票
1 回答
1193 浏览

react-native - 滚动视图下拉

我正在尝试构建一个组件来检测滚动视图上的下拉。当您尝试刷新 facebook 或 twitter 提要时,下拉。

所以我的方法是尝试使用 onScroll 方法来检测滚动视图的变化。

但是,我发现当您向下滚动时(就像您滚动浏览 facebook 或 twitter 提要),它会给您偏移量的值。然后我尝试模仿“下拉”行为,我将在相反方向滚动。困难在于当滚动视图达到 0 时,我无法检测到滚动的任何减少。那有意义吗?基本上,当滚动视图为 0 时,我如何检测下拉。

0 投票
5 回答
3891 浏览

react-native - TextInput 防止 ScrollView 滚动

我有一个比手机屏幕高度长的表格。它是一个ScrollView包含TextInput组件。问题是当我想在 a 上拖动开始触摸时TextInputScrollView不会移动。如果我从空白处开始拖动(View在代码示例中),它会完美滚动。

感觉就像在TextInput以某种方式吃触摸/拖动事件,不允许ScrollView交互。

ScrollView外观与此类似:

我怎样才能使滚动工作?

更新:我注意到当我开始在空白处滚动时,我可以通过触摸输入来继续滚动。但是,一旦惯性停止,我就无法再次使用输入滚动。

0 投票
1 回答
2496 浏览

react-native - 滚动视图和具有 flex 的子项:1

是否可以有一个包含以下内容的布局ScrollView

并满足以下先决条件:

第一个的高度View是动态的(取决于文本长度)。第三个的高度View是静态的(里面总是三个按钮)。屏幕的其余部分应该View用地图填充,但最小高度设置为 250。

现在棘手的部分:如果 first 中有很多文本View,所以地图不适合,应该出现一个滚动。我无法做到这一点。我试图给出地图View flex: 1minHeight: 250,但它根本没有渲染。

解决方案

好的,我找到了修复它的方法。在第一次渲染中,我得到屏幕高度 ( Dimensions) 以及第一个和第三个视图的高度 ( onLayout)。screenHeight - view1 - view3 - naviagtionHeight然后,我计算第二个视图 ( )的高度并forceUpdate()重新渲染它。

在此处输入图像描述

0 投票
3 回答
5763 浏览

react-native - 在 RN ScrollView 中将 scrollEnabled 动态设置为 False

scrollEnabled当滚动到某个位置时,如何更改 React Native ScrollView 的参数的布尔值?

我确实在 ScrollView 中有一个 ScrollView,并且由于外部 ScrollView,内部 ScrollView 没有响应。scrollEnabled当参数设置为False外部 ScrollView时,内部 ScrollView 起作用。我的想法是将外部 ScrollView 动态设置为scrollEnabled={false}到达底部时。我该怎么做呢。

谢谢,

0 投票
0 回答
1892 浏览

react-native - 使用自定义微调器 android 反应本机 refreshControl

我们需要在带有自定义微调器的本机应用程序中的滚动视图上实现拉动刷新功能。我们通过使用 react native customControl 在 iOS 中实现了这一点。在 iOS 上,ScrollView 正在滚动,当我们拉动滚动视图时,我们能够看到顶部的微调器。

但是对于 android 的相同代码不起作用。因为,在android中,当我拉动滚动视图时,滚动视图不滚动(可能是内容小于屏幕高度)。只有当我们滚动视图时,微调器才会可见。在这种情况下,如何在android中实现/实现这个功能?

0 投票
1 回答
4418 浏览

react-native - 滚动视图中的 React-native 绝对定位元素不会显示

我正在尝试在 ScrollView 中为我的 EMT 课程的测验应用程序创建一系列“抽认卡”。用户应该点击一张卡片,让它翻转以显示答案。ScrollView 内的卡片组之间有标题。

卡片动画是通过这个容器实现的,它对卡片进行绝对定位。我无法让卡片正确显示 - 它要么没有高度,根本不显示,要么看起来被压扁,或者,如果我通过编辑 FlipView 代码删除了绝对定位,则高度加倍以为前面腾出空间然后回来。

演示代码,可以直接粘贴到 index.ios.js 中:

关于如何让卡片正确显示的任何想法?谢谢你提供的所有帮助。

0 投票
1 回答
1023 浏览

react-native - ReactNative ScrollView 滚动阈值

我试图了解如何为 RN ScrollView设置阈值。

这是因为如果您在水平 ScrollView 中有多个垂直可滚动视图,则视图的滚动非常困难。

所以我只需要保持水平滚动的东西,直到手指水平滑动某个像素跨度。

有人知道如何存档吗?