在使用水平 FlatList 和其他垂直 FlatList 作为项目时，刷新似乎存在问题。当在垂直列表上启用刷新但在水平容器列表上未启用刷新时，会发生这种情况。如果您非常小心并且仅垂直滚动（这非常困难），则实际上可以刷新每个单独的列表。但是一旦你横向滚动，刷新就会卡住。

• React Native 嵌套 FlatLists
• Android 中的问题。在 iOS 中工作

尝试我尝试用具有相同结果的 ScollView 替换包装 FlatList。我完全意识到可以禁用单个列表的刷新并在包含的 FlatList 上启用它，但这在我的情况下不太合适。

我也尝试过对这个类似问题的赞成答案，但它没有解决它。

例子：

有人对此有解决方案吗？

我针对此问题的完整源代码发布为 Expo 应用程序： https : //exp.host/@kevinoldlifeway/swipe-scrollview-of-webviews 以及 Github https://github.com/kevinold/swipe-scrollview -of-webviews

我正在 React Native 中构建一个书本视图。使用 ScrollView，我想左右滑动以浏览可能有几百到几千个标题的页面。

既然是这种情况，我的目标是只使用最少量的数据，以便用户能够在页面之间滑动，查看前一页和下一页。

我正在加载一个 3 元素数组，如下所示：

这将由 Redux 在 state 中更新（为了简单起见，这里没有使用），并且会重新渲染和重新聚焦列表。

我的目标是我ScrollView总是在“当前”页面上“居中”。

页面滚动到上一页和下一页由handleScroll加载适当的预计算数组的方法处理，以便当前页面保持焦点，但上一页和下一页（屏幕外）会适当更新。

我尝试使用以下组合来平衡“当前”页面：

contentOffset={{ x: width, y: 0 }}上ScrollView

和

我也试过scrollTo在回调之后this.setState，但没有任何运气。

我想知道这种“居中”是否可以通过使用Animated.

对于我的项目，我希望实现一个 ScrollView 来显示项目，就好像您正在浏览一盒名片一样。我当前的实现基于Albert Brand 关于动画滚动视图的文章（在尝试了许多其他方法之后）。

然而，整个事情现在变得非常紧张。谁能告诉我如何平滑当前的实施？或者，有没有人有提示如何以不同的方式获得这种行为？任何解决方案都应该适用于 iOS 和 Android。

这个 gif 显示了我当前的实现，包括抖动问题。它还应该清楚地说明我所追求的行为： iOS 模拟器中 ScrollView 的屏幕截图

这是我目前的实现：

我想在 ScrollView 中使用 WebView 来处理我的本机应用程序。但如果我这样做，我将无法滚动我的 webview，除非我禁用滚动视图上的滚动。但是，我需要滚动视图和 webview 中的滚动。关于如何做到这一点的任何建议或解决方案？

我有一个简短的问题：如何在滚动视图中将不同的样式应用于粘性标题？
我想在它粘住时添加一些阴影/高度。

谢谢 ：）

环境

• 反应原生：0.45.0

我现在正在研究 React-Native 中的选项卡组件。所以我有一个以 PanResponder 为父处理水平手势的视图。但是，当我将 ScrollView 作为子视图添加到该视图时，ScrollView 有时会拦截水平手势并成为响应者。因此，当我向右或向左滑动时，即使我没有垂直滑动并且 PanResponder 返回 false onTerminationRequest [我知道这并不能保证终止请求被拒绝]，它也会成为手势中间的 responserr。

我查看了 GitHub 页面上的其他问题和问题，但似乎每个人都遇到了与 PanResponder 拦截 ScrollView 的问题完全相反的问题。

这是泛响应器：

这是相应的渲染部分：

所以有谁知道我可以解决这个问题吗？

The Problem

I am developing a horizontal scrollable list which always scroll one entire screen (i.e. one "page") on each swipe. When it is on the first page and the user pulls to right again, I need to refresh the entire list.

As for a vertical ScrollView, a standard RefreshControl would appear if a user pulls down when the view is at its topmost position. But for the horizontal version, there is no standard solution.

My Experiment

The idea

I have tried to add a PanResponder to capture the touching and moving events. Note that I am using a VirtualizedList in my application. The basic logic is that:

• I create a hidden View (whose width is set to 0 by default) with an ActivityIndicator in it, and insert this View as the ListHeaderComponent into the VirtualizedList
• I listen to the VirtualizedList's onScroll event and keep saving the latest scroll position
• When then scroll position is nearly 0, and the user pulls right (event captured gesture through PanResponder), then I animate the width of the hidden View with ActivityIndicator to simulate the RefreshControl behavior

The result

However, the PanResponder does not properly capture the desired event. Most of the time, when I pull right at the beginning of the VirtualizedList (on an Android device), only the standard hitting edge animation appears (a gradient blue layer shows up).

By adding some logs, I found that onPanResponderGrant can occasionally be triggered, but none of onPanResponderMove, onPanResponderRelease, onPanResponderTerminate or onPanResponderTerminationRequest is ever fired.

When onPanResponderGrant is triggered, the hidden ActivityIndicator occasionally appears paritally. The "pull to right" effect only shows up shortly and always stops instantly with only a very narrow part of the hidden View appears.

I guess that the underlying ScrollView steals the event and prevents my code from responding. But even if I set onPanResponderTerminationRequest to always reture false still won't help. Even if I directly subsitute the VirtualizedList with a ScrollView also yield the same result.

Does anyone have any idea how to properly capture the touch and move event when ScrollView scrolls beyond is top? Or is there another viable way to implement a horizontal version of a RefreshControl?

The Experimental Code

Temporary Workarounds (Not so perfect)

• Fire the refresh event (as well as the animation) directly inside onPanResponderGrant: This way, I'm still not able to track touch moves. So the scrolling pane cannot follow the touch point.

• Move the operations in onPanResponderMove to onMoveShouldSetPanResponder with additional conditions (e.g. adding my own "grant" condition judgment): This way, I can track the touch movements, but since I haven't got the real "grant", I'm not able to capture the *Release/*Terminate/*End event (i.e., I won't know when the touch event ends, therefore never actually know when to fire the refreshing event!)

Perfect Solutions

Waiting for your idea...

我有一个带有 scrollView 和很多 TextInputs 的页面，例如：

问题是：当键盘显示时，文本输入被键盘覆盖

在 Ios 上找到的不适用于 Android 的半解决方案是使用在接收焦点的 Textinput 上调用的 .measure() (OnFocus) 然后滚动到 textInput

正如你现在可能的那样， .measure 的使用方式如下：

但是 fixed_x 和 y 每次使用 Android 时都会返回 0（我已经尝试过 https://github.com/facebook/react-native/issues/12966不透明和可折叠的错误）

我也试过这个：React native: get current scroll position of scrollview

获取 scrollView 当前滚动并添加缺少的内容以使 TextInput 可见。没有成功（不适用于 ios/android）

https://github.com/Andr3wHur5t/react-native-keyboard-spacer也不相关，因为它创建了一个大小发生变化的组件，但无助于滚动到正确的 TextInput

最后：https ://github.com/APSL/react-native-keyboard-aware-scroll-view与 ios 完美搭配，但很遗憾也不适用于 android

有人有线索吗？

我正在使用 react native v0.44.2 的滚动视图，我想禁用拉动刷新并只生成视图的滚动，是否有另一种方法可以在不使用滚动视图的情况下做到这一点？
看了一些老版本，不知道最近有没有放这个动画。所以我的代码如下：

和我的风格：

我使用 FlatList 和随后的 ListHeaderComponent 作为我屏幕的根组件。我不希望它的顶部在滚动时弹跳，但我想保持底部弹跳以达到 UX'n'feel 的目的，因为 FlatList 支持无限滚动。任何想法如何？