react native FlatList遇到的问题

1.FlatList可以渲染多条数据，ListHeaderComponent={header组件}，如果想让header组件带有粘性，就用stickyHeaderIndices={[0]}，如果想有好几条数据粘性，就在数组里加[0,2,3...]（发现很多ScrollView 的方法，FlatList是可以使用到，FlatList是基于ScrollView写的）

2.如果想要使用点击后滚动到某一个数据，scrollToIndex必须搭配使用ref，getItemLayout。

 <FlatListdata={data}ListHeaderComponent={<Header/>}stickyHeaderIndices={[0]}renderItem={({ item }) => (<View>{item.a}</View>)}ref={flatListRef} //滚动到指定index的item如果不设置getItemLayout属性的话，无法跳转到当前可视区域以外的位置getItemLayout={getItemLayout}/>const getItemLayout = (_data: any, index: number) => ({ length: 单条数据盒子高度, offset: 单条数据盒子高度 * index, index });const scrollToIndex = useCallback(() => {
const index = data.findIndex((item) => item.id === current.id);//找到点击的indexif (index > 0) {flatListRef.current?.scrollToIndex({ animated: true, index });}}, [current.id, data]);useFocusEffect(useCallback(() => {scrollToIndex();}, [scrollToIndex])
);

下拉刷新刷新大神帮忙看了半天才发现是我的FlatList 引入路径有问题，导致的下拉刷新不能使用，所以注意，是从react-native里导入....

 <><Header  /><FlatListdata={data}renderItem={({ item }) => (<View >item</View>)}ref={flatListRef}getItemLayout={getItemLayout}refreshing={refreshing}onRefresh={loadData}/></>const [refreshing, setRefreshing] = useState(false); // 下拉刷新状态const loadData = useCallback(async () => {setRefreshing(true);await onRefreshList();setRefreshing(false);}, [onRefreshList]);

react native FlatList遇到的问题相关推荐

如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
React Native FlatList优化
众所周知React Native刷新控件一般都是采用setState,对于FlatList来说就要想办法减少item的渲染,采用shouldComponentUpdate自己定义什么情况下执行刷新,有 ...
React Native FlatList和SectionList列表组件
FlatList 之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过An ...
react native FlatList
高性能的列表组件 import React,{Component} from 'react'; import {View,Text,FlatList} from 'react-native';expo ...
React Native FlatList属性及使用详情
FlatList属性及用法 FlatList属性 FlatList用法 FlatList属性 data:列表数据 numColumns:列数组件内元素必须是等高的,无法支持瀑布流布局 renderI ...
react native FlatList 使用详解
高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. ...
【react native】Flatlist实现上拉滚动加载
参考博客:React Native FlatList上拉加载.FlatList enum FooterType {Null = 0,NoData = 1,LoadingData = 2, }expor ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...

react native FlatList遇到的问题

react native FlatList遇到的问题相关推荐

最新文章

热门文章