标签: react-native-flatlist

我想从我的应用程序中删除"加载更多"按钮并实现"无限滚动"类型的功能,该功能允许用户向上滚动其消息历史记录并按照请求下载旧消息.

由于ListView正在被删除,我正在转向FlatList组件,我正在尝试找出一个很好的实现来确定用户何时滚动到页面顶部.由于FlatList总是从列表顶部开始,我们希望确保仅onTopReached在用户滚动列表时调用.

我怎么能这样做？

开放源代码实现的链接将受到赞赏,但应列为注释而不是答案.使用ListView的实现是无关紧要的.

我想在FlatList或ScrollView中滚动时禁用TouchableOpacity的突出显示.滚动时onPress没有触发,它只是被触发的突出显示效果.

我尝试过delayPressIn但它只延迟onPress时间而不是突出显示效果.

我有一个 flatList 视图，我希望它在数据更新时滚动到结束或滚动到索引（从服务器获取数据），我在 comoponentDidUpdate 中执行但它不起作用。现在当渲染完成时，listView 总是滚动到顶部而且我看不到最新加载的数据。所以有没有办法在渲染完成时捕获事件。

代码：

...
fetchData(){
    fetch(url)
    .then((res)=>{
        this.setData({data:[...this.state.data, res.data]})
    })
}
componentDidUpdate(){
    this.refs.listView.scrollToEnd({animated:true})
}
render(){
    return <FlatList ref='listView' data={this.state.data} onEndReached={()=>this.fetchData()}.../>
}

我的任务是过滤一些数组并将其设置为 FlatList。

我的过滤功能是：

updateInvoiceList = (text) => {
  let invoiceList = [...this.state.baseInvoiceList];
    invoiceList = invoiceList.filter(el => {
     return el.name.toLowerCase().includes(text.toLowerCase())
    });
  this.setState({invoiceList})
}

过滤后，我将 state.invoiceList 提供给 FlatList 并且一切正常。但是，当我设置一些不存在于我的数组中的符号时，例如“！”，该函数会清除数组并且它仍然可以正常运行。当我删除符号“！”时，我得到一个错误屏幕：

 index=10 count=0
addInArray
    ViewGroup.java:5235
addViewInner
    ViewGroup.java:5128
addView
    ViewGroup.java:4935
addView
    ReactViewGroup.java:452
addView
    ViewGroup.java:4875
addView
    ReactViewManager.java:269
addView
    ReactViewManager.java:36
manageChildren
    NativeViewHierarchyManager.java:346
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:917
flushPendingBatches
    UIViewOperationQueue.java:1025
access$2600
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1085
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:166
doFrame
    ChoreographerCompat.java:84
run
    Choreographer.java:964
doCallbacks
    Choreographer.java:790
doFrame
    Choreographer.java:721
run
    Choreographer.java:951
handleCallback
    Handler.java:883
dispatchMessage
    Handler.java:100
loop
    Looper.java:214
main
    ActivityThread.java:7356
invoke
    Method.java
run …

如何多选并突出显示 react native flatlist 中的组件。我已经检查了文档。但这有点令人困惑，有人可以帮助我。我已经使用这种方法完成了单选。任何人都可以将其修改为多选。我将在我完成单选的地方提供小吃链接

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

const Data = [
  {
    id: 1,
    first_name: 'Sile',
  },
  {
    id: 2,
    first_name: 'Clementia',
  },
  {
    id: 3,
    first_name: 'Brita',
  },
  {
    id: 4,
    first_name: 'Duke',
  },
  {
    id: 5,
    first_name: 'Hedvig',
  },
  {
    id: 6,
    first_name: 'Paulie',
  },
  {
    id: 7,
    first_name: 'Munmro',
  },
  {
    id: 8,
    first_name: 'Dyanna', …

在 React Native 中使用 FlatList 组件时，我需要知道所有可见项何时都已呈现。

我正在提供data，renderItem当我得到时，componentDidMount我可以在那里看到 FlatList，但是因为 FlatList 组件异步呈现每个项目，它们只在 on 之后显示componentDidUpdate。此外，这可能（并且可能会）包括非视图项目。

我想知道是否有人找到了一种可能的方法来控制过程（而不是与setTimeout）知道可见项目何时完全呈现。

谢谢。

在我的 ReactNative 应用程序中，我使用“SafeAreaView”来限制我在可见区域中的内容。我的应用程序以横向模式运行。看图

我有一个带有标题的 FlatList。当我现在拉动刷新时，标题与所有列表项一起下降：

但我希望它保持在顶部，以便只下拉项目：

如果我将我的标头组件放在 FlatList 内而不是在它之前，则可以实现这种行为。但是，它不适合，因为标题将始终保持在顶部，但我需要它与列表项一起滚动，就好像它是列表的一部分一样。我怎样才能做到这一点？

我曾尝试在 onScroll 事件中为标题设置负边距，但它看起来一点也不平滑并会导致奇怪的效果。

我很感激你关于如何做到这一点的想法。

是否可以使用 React Native Web实现 Flatlist，在其中预先添加数据，同时保持可见内容？

现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我使用onContentSizeChange在更新后强制移动滚动位置，但体验很糟糕，因为有时更新前会有很大的延迟。检查这个松弛看看我的意思：https : //snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有没有人成功地使用 React Native Web 实现类似 Chat 的 Flatlist？如果是，如何实现？

编辑：我发现在 react native web 上，当您预先添加数据IF AND ONLY IF滚动条不在屏幕顶部时，内容可见性会自动保持。（点心）

所以我的问题仍然存在......即使滚动条一直向上滚动，如何预先添加数据并保持可见性？

所以我最近尝试在 firebase 中对用户进行 FlatList 搜索，但我遇到了一堆错误，尽管代码中似乎没有错误。目前，该列表搜索并没有返回任何内容，尽管“用户”的 firebase 集合中有明确的数据。当我尝试在 getUsers() 中 Promise 的解析语句正上方记录“结果”时，我突然看到了用户，虽然我得到“结果”不存在的错误，这很奇怪，因为为什么会出现错误使代码工作？无论如何，如果有人能够帮助我尝试使这个 FlatList 工作，我将不胜感激。我已经为此工作了 3 天，似乎无法在线找到任何解决方案或修复代码。为了你的帮助，我很乐意给你一个邓肯甜甜圈，因为这对我来说意义重大。我感谢所有帮助和提示，并提前感谢您的时间！（我的平面列表的代码在下面，没有样式）

import React, { useState, useContext, useEffect } from "react";
import {
    View,
    Text,
    StyleSheet,
    StatusBar,
    TextInput,
    ScrollView,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    FlatList,
} from "react-native";
import { FirebaseContext } from "../context/FirebaseContext";
import { UserContext } from "../context/UserContext";
import { FontAwesome5, Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import _ from "lodash";
import "firebase/firestore";
import firebase from "firebase";
import config from "../config/firebase";

const SearchScreen …