标签: react-native-flatlist

我目前正在尝试使用该FlatList组件实现一种形式的 LazyLoading ，它引入了一个名为的简洁小功能onViewableItemsChanged，它为您提供了所有不再出现在屏幕上的组件以及现在出现在屏幕上的项目的列表。

这是一个自定义的 LazyLoad 实现，因此比大多数可用的 LazyLoad 开源库更复杂，这就是我正在研究自己的实现的原因。我已经调查过react-native-lazy-load和其他人了。

基本上，我需要能够调用一个函数，该函数是在 FlatList 中呈现的组件的一部分，我尝试创建对 FlatList 中呈现的项目的引用并这样调用它，但它似乎不起作用.

例如：

<FlatList data={...}
    renderItem={(item) => <Example ref={(ref) => this[`swiperRef_${item.key}`] = ref}}
    onViewableItemsChanged={this.onViewableItemsChanged}
/>

onViewableItemsChanged = ({viewableItems}) => {
    viewableItems.forEach((item) => {
        const { isViewable, key } = item;
        if(isViewable && !this.cachedKeys.includes(key)) {
            const ref = this[`swiperRef_${key}`];
            if(!ref) return console.error('Ref not found');
            ref.startLoading();
            this.cachedKeys.push(key);
        }
    });
}

现在在<Example />组件中，我将调用一个函数startLoading，当一个新的可见项出现在屏幕上时应该调用该函数，但是 ref 永远不存在。

我使用 Flatlist 制作了图像网格。我正在从网络加载图像。目前，当我导航到该特定页面时，所有图像都会加载。我想要的只是加载屏幕上可见的那些图像并停留在滚动条上。屏幕上同时显示六幅图像。

是否可以在 Flatlist 中的滚动条上加载图像？

我的容器是一个滚动视图，里面是一个平面列表，它从服务器加载数据。

平面列表：

<VirtualizedList
  ListEmptyComponent={<NoData />}
  data={data}
  getItem={(items, index) => items.get(index)}
  getItemCount={(items) => items.size}
  keyExtractor={(item, index) => String(index)}
  renderItem={this._renderItem}
  refreshControl={
     <RefreshControl
       refreshing={loading}
       onRefresh={this._onRefresh.bind(this)}
     />
  }
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={0.1}
  onMomentumScrollBegin={() => {
    Log('onMomentumScrollBegin fired!')
    this.onEndReachedCalledDuringMomentum = false;
  }}
/>

这handleLoadMore是：

handleLoadMore = () => {
  Log('handleLoadMore fired!');
  if (!this.onEndReachedCalledDuringMomentum) {
    // fetch data..
    this.onEndReachedCalledDuringMomentum = true;
  }
}

问题是handleLoadMore从未被调用和onMomentumScrollBegin也从未被调用。

怎么解决这个问题呢？

我在 Flatlist 的行项目内呈现了 TouchableOpacity。我想在用户点击该项目时显示点击效果。但是，当用户开始滚动时也会触发点击效果。如何在用户滚动时禁用突出显示效果？

我有一个FlatList组件，由 3 个部分组成：

<View style={{ flex: 1 }}>
    <FlatList
        ListHeaderComponent={Comp1}
        ListFooterComponent={<Comp2 style={{ flexGrow: 1, justifyContent: 'flex-end' }}/>}
        renderItem={Comp3}
        contentContainerStyle={{ flexGrow: 1 }}
    />
</View>

默认情况下，ListFooterComponent会在ListHeaderComponent, ifdata.length为 0 之后渲染。我需要始终将其渲染在底部。

到目前为止我发现的一种解决方法是为ListEmptyComponent. 在这种情况下，它看起来很好，直到我添加至少一项 - 然后它再次粘在顶部。

可以ListFooterComponent默认贴在​​底部吗？

蓝色是FlatList，红色是 -ListFooterComponent

我正在构建月视图日历，需要能够左右滑动下个月和上个月。

我目前正在为此使用水平 FlatList，它在时间上非常有效（向右滚动）。它只是在列表末尾增加了几个月。但我不知道如何有效地及时滚动（向左滚动）。当我将项目添加到数据的左侧时，滚动位置变得不稳定。

当新项目添加到数据数组的开头时，我正在重置滚动索引，这在完美的世界中有效。但是，当更新索引时滚动操作正在进行时，就会出现问题。在这种情况下，滚动位置会变得不稳定。

有人解决这个问题了吗？

我已经构建了一个应用程序（您可以在下面看到它的屏幕截图）：

起初，我的问题是，当我专注于搜索输入时，键盘会出现，但我只能通过触摸 Flatlist 而不是搜索输入周围的区域来关闭键盘。所以我添加了以下代码：

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

....并且将 render() 的整个 XJS 内容包装在里面<DismissKeyboard>，这样做我完全解决了关闭键盘的问题（我的意思是在此之后我现在可以通过触摸此页面视图的任何位置来关闭键盘） ，但在我遇到另一个问题之后。当前问题可以通过以下步骤重现：

• 我刚刚渲染了页面，一切看起来都很好很酷（只是开始）

• 我可以轻松流畅地滚动平面列表

• 由于我们第一次渲染它专注于搜索输入，键盘出现了，所以为了完全看到它后面的Flatlist，应该关闭键盘......

• 所以我通过触摸页面中的其他地方来失去焦点

• 成功关闭键盘

• 但现在我无法顺利滚动 Flatlist

• 但是如果我再次专注于搜索输入，我将能够毫无问题地滚动 Flatlist

****注意**** 如果我通过单击手机的后退按钮关闭键盘，我不会遇到这个问题，但在现实世界中，考虑到用户体验，用户期望通过在某处outFocusing（关闭键盘） ) 应该能够毫无问题地滚动 Flatlist。

我试过的：

• 将 Flatlist 包裹在里面ScrollView==> // 没有变化：/

• 将 {{ flex: 1 }} 的样式赋予 Flatlist ==> // 无变化 :/

如果您以任何方式帮助我，将不胜感激

我有一个 React-Native 应用程序，其中使用 FlatList 来显示从服务器获取的项目列表。该列表有 2 列，我需要列表项具有相同的高度。我在渲染列表项的代码周围放置了边框，但列表项的高度不同。我尝试过使用弹性盒设置来使视图填充容器，但我尝试的一切都没有什么区别。

我创建了应用程序的简化版本来说明该问题：

请注意，红色边框区域的高度不同。我需要让它们具有相同的高度。

灰色边框添加在包装负责列表项的组件的视图中，红色边框是负责列表项的组件的根视图。为了清楚起见，请参阅下面的代码。

我无法在应用程序中使用灰色边框，因为我的应用程序显示空框，而负责列表项的组件在呈现自身之前从服务器获取附加信息

此外，我不能使用固定的高度尺寸。

应用项目结构及代码

我的代码以“container.js”结尾的文件从服务器获取数据并将其传递到其匹配的渲染组件的方式进行分割。例如，“MainListContainer”将从服务器获取列表，然后将列表数据传递给“MainList”，“ListItemContainer”将从服务器获取有关单个列表项的附加信息，并将其传递给“ListItem”进行渲染实际项目。我已将此模型保留在我的简化应用程序中，以便它尽可能接近我的实际应用程序。

索引.js

import {AppRegistry} from 'react-native';
import MainListContainer from './app/components/MainListContainer';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => MainListContainer);

MainListContainer.js

import React from 'react';
import MainList from './MainList';

const data = [
  {id: '1', title: 'Item 1', subtitle: 'A', description: 'This is the first item.'},
  {id: '2', title: 'Item 2', subtitle: 'B', description: 'The Big Brown Fox Jumped over the lazy dogs. The Big Brown Fox …

我正在使用名为 selectedStream 的状态设置我的 flatlist 组件显示的数据。每次用户按下不同的组选项时，selectedStream 都会发生变化。我注意到平面列表需要 1-3 秒才能刷新当前已显示的所有帖子。我希望有一个加载指示器，以便当指示器消失时，列表已经正确显示新更新的数据。

        <FlatList   
                    maxToRenderPerBatch={5}
                    bounces={false}
                    windowSize={5}
                    ref={feedRef}   
                    data={selectedStream}/> 

我在 Android FlatList 上遇到问题。如果标头中有一个向下延伸的元素（在我的例子中，标头底部有一个下拉菜单），它总是在 Android 上的 flatList 项目下呈现。我可以将 contentContainerStyle zIndex 设置为 99 之类的值，这解决了 iOS 上的问题，但 Android 仍然在列表项下呈现标题。

如果在渲染 flatList 后更改 zIndex，则该问题会以某种方式得到解决，但这会引入另一个问题。当我向下滚动列表时，应用程序严重崩溃。这是展示这个问题的世博会小吃。

最初，zIndex 设置为某个大值，按下 Change ZINDEX 按钮只需将其增加 1。这修复了 zIndex 问题，但一旦您开始滚动列表，应用程序就会崩溃。

https://snack.expo.dev/GalYuThms?platform=android

知道如何解决这个问题吗？

谢谢。