标签: react-native-scrollview

爱马仕已启用

操作系统：iOS

使用 FlatList 和 ScrollView

开发ScrollView或FlatList时，滚动条没有问题。在生产中，有时它看起来很丑并且位于屏幕中间，有时与右侧（应该在的位置）有巨大/小的偏移，有时甚至位于左侧。这是我得到的图像：

先谢谢各位小伙伴了！

我有一个事件部分,其中包含包含日期的章节标题.我需要能够跳转到特定日期,并将初始滚动位置设置为将来的第一个日期.

为了跳转到特定日期,我尝试将他们的y位置存储在州.

renderSectionHeader= (sectionData, sectionID) => (
      <View
        onLayout={(event) => {
          const { y } = event.nativeEvent.layout;
          const sectionPosition = { [sectionID]: y };
          const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
          this.setState({ sectionPositions });
        }}
       ...

我遇到了这种方法的问题,但是因为没有在列表下方的元素上调用renderSectionHeader(由于延迟渲染).

然后我尝试以数学方式计算位置,但这会导致每个部分的渲染在靠近给定日期时显示在屏幕上.

有没有办法达到我的需要？

有关

React Native ListView:如何滚动到特定行

https://github.com/facebook/react-native/issues/499

UPDATE

在我的应用程序中,我知道所有行都是完全相同的高度.

使用contentOffset={{ y: offsetY }}而不是setScroll不起作用,因为它仍然需要渲染到给定项目的所有项目才能工作.

使用initialListSize={99999999}确实有效,但使页面变得非常慢,我被警告不要使用它.

更新2

是否可以将我的初始内容提供给数据源,然后更新数据以在屏幕上当前元素之前和之后添加额外的项目？

或者是否有一个我没找到的图书馆可以满足我的需求？

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

感觉就像在TextInput某种程度上吃了触摸/拖动事件,不允许ScrollView交互.

在ScrollView类似于此:

function Form() {
    return (
        <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <View style={{ height: 150, }} />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
        </ScrollView>
    );
}

如何进行滚动工作？

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

我FlatList在我的聊天应用程序中垂直倒置，它在底部显示最新消息，在顶部显示最旧消息（就像所有其他聊天应用程序一样）
问题是当我想将新消息添加到列表底部时，FlatList自动跳转到底部列表！
我所需要的只是防止在这种情况下滚动

这是我的FlatList：

<FlatList
  inverted
  style={{flex: 1}}
  data={this.state.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
/>

这是将最新消息添加到列表的代码

const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });

I have a scrollview which content is larger than phone screen.
I scroll to the bottom and there I have function that reload content of that scrollview but first clear data source for it.
Reload function is connected to RefreshControl on scrollview.
But RefreshControl is not visible while loading data except when I slightly touch screen where content should be.
And this is only when I start reload from scrollview bottom.
I tried to scroll to top but it doesn't …

我正在使用React Native 的FlatList来渲染一堆堆叠在一起的项目。

这很好用，我设法使FlatList自身扩展其高度以填充可用空间，但我希望FlatList项目在有更多可用空间时增长。

使用ScrollView（简化伪代码）很容易做到这一点：

<ScrollView
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
>
  <Item key={1} style={{ flexGrow: 1 }} />
  <Item key={2} style={{ flexGrow: 1 }} />
</ScrollView>

但是它不适用于FlatList（简化的伪代码）：

<FlatList
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
  renderItem={({ index }) => <Item key={index} style={{ flexGrow: 1 }} />}
/>

我创建了一个 Expo Snack，展示了ScrollView成功种植元素和FlatList失败的元素。

网上似乎有很多关于使父项FlatList全高的讨论，但我一直在努力寻找有关使FlatList 项目 增长以填充可用FlatList高度的任何内容。

我需要使用，FlatList因为我计划使用react-native-draggable-flatlist来实现拖放并且找不到不使用 …

是否有可能有一个包装的布局ScrollView:

<ScrollView>
  <View>dynamic height</View>
  <View>flex with minHeight</View>
  <View>static height</View>
</ScrollView>

并满足以下先决条件:

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

现在是棘手的部分:如果首先有很多文本View,所以地图不适合,应该出现滚动.我无法做到这一点.我想给地图View flex: 1和minHeight: 250,但它不是在所有的渲染.

解

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

我想了解如何设置RN ScrollView的阈值.

这是因为如果在水平ScrollView中有多个垂直可滚动视图,那么滚动视图非常困难.

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

有没有人知道如何存档这个？

我想创建一个带有ScrollView的屏幕，其中包含一些输入字段，并在屏幕底部创建一个Button（实际上是普通View中的2个按钮）。这应该很容易，但是，即使ScrollView中没有足够的元素来填充整个屏幕，我也想将按钮放置在屏幕的最底部。我可以使用绝对定位，但ScrollView可以比屏幕更大（更高），在这种情况下，按钮应位于ScrollView的末尾。（因此它将出现在屏幕之外，这意味着用户应向下滑动以查看按钮）。

我已经做了很多尝试，但是Button总是紧随ScollView内部的其他元素之后。

在图片中，滚动视图具有蓝色边框，而包含按钮的普通视图具有黑色边框。

任何建议表示赞赏。

我有一个水平组件<FlatList>，包含 100 个项目（日历天），宽度与屏幕相同。将<FlatList>被设置为捕捉到的间隔类似于屏幕宽度，所以可项之间滑动。

当我滑动到特定日期时，我想更新 UI 以在<FlatList>. 现在我正在使用onMomentumScrollEnd查找最终偏移量和显示在标题中的日期项目。

但是，用户体验不是最佳的，因为在滑动/滚动动画结束之前标题不会更新。

我需要的是一种方法来确定<FlatList>用户一滑动就会捕捉到哪个偏移量。

我想onScroll可能会有用，但是<FlatList>根据我从onScroll.

但是，我可以看到一些 3rd 方模块react-native-snap-carousel正在这样做，使用onScroll，所以我想这是可能的。

我选择不使用，react-native-snap-carousel因为它确实会降低我屏幕上的滑动动画性能。如果模块没有给出明确的答案，请查看代码，因为该模块具有大量我不需要的功能，这些功能是它用于确定下一个snapTo偏移量的代码的一部分