react native高性能组件recyclerlistview

最新推荐文章于 2024-12-18 11:12:32 发布
最新推荐文章于 2024-12-18 11:12:32 发布
阅读量1k 收藏 2
点赞数
分类专栏： 封装组件 文章标签： react native javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tuness/article/details/125102918
版权
本文介绍了如何使用RecyclerListView在React Native中实现滑动输入组件，涉及数据加载、滚动事件处理和视图切换。展示了如何配置LayoutUtil和DataProvider以适应不同布局需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

官方文档： https://github.com/Flipkart/recyclerlistview/blob/master/README.md
第一步
npm install --save recyclerlistview
or
yarn add recyclerlistview
第二步
主文件

/*
 * @Author: ChenShy
 * @Date: 2022-06-01 15:42:54
 * @Last Modified by: ChenShy
 * @Description: 标尺滑动输入组件
 */
import React, {Component} from 'react';
import {View, StyleSheet, ActivityIndicator, Dimensions, Text, Image} from 'react-native';
import {sc} from 'react-native-size-matters';
import {RecyclerListView, DataProvider} from 'recyclerlistview';
import {LayoutUtil, ViewSelector, ImageRenderer, DataCall,} from './LayoutUtil';

const {width, height} = Dimensions.get('window');

export default class SetTargetWeight extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataProvider: new DataProvider((r1, r2) => {
                return r1 !== r2;
            }),
            layoutProvider: LayoutUtil.getLayoutProvider(4),
            images: [],
            count: 0,
            viewType: 0,
            contentOffset: 0,
        };
        this.inProgressNetworkReq = false;
        this.recycler = null;
    }

    componentWillMount() {
        this.fetchMoreData();
    }

    viewChangeHandler = viewType => {
        //We will create a new layout provider which will trigger context preservation maintaining the first visible index
        this.setState({
            layoutProvider: LayoutUtil.getLayoutProvider(viewType),
            viewType: viewType,
        });
    };

    async fetchMoreData() {
        if (!this.inProgressNetworkReq) {
            //To prevent redundant fetch requests. Needed because cases of quick up/down scroll can trigger onEndReached
            //more than once
            this.inProgressNetworkReq = true;
            // const images = await DataCall.get(this.state.count, 20);
            let images = []
            for (let i = 97; i < 250; i++) {
                images.push(i)
            }
            this.inProgressNetworkReq = false;
            this.setState({
                dataProvider: this.state.dataProvider.cloneWithRows(
                    this.state.images.concat(images)
                ),
                images: this.state.images.concat(images),
                count: this.state.count + 20,
            });
        }
    }

    componentDidMount() {
        setTimeout(() => {
            this.recycler.scrollToIndex(100, true) // 定位到第n个
        }, 200);
    }

    rowRenderer = (type, data, index) => {
        //We have only one view type so not checks are needed here
        // return <ImageRenderer imageUrl={data} />;
        return <View style={{
            width: sc(81),
            marginTop: sc(13),
            height: sc(22),
            borderRightColor: '#ABD0E0',
            borderRightWidth: sc(1),
            flexDirection: 'row',
            alignItems: 'flex-end'
        }}>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9,].map((item, idx) => {
                return <View style={{
                    height: sc(13),
                    width: sc(9),
                    borderLeftColor: '#ABD0E0',
                    borderLeftWidth: sc(idx == 0 ? 0 : 1)
                }}>
                    {idx == 0 ? index == 0 ? null : <Text style={{
                        fontSize: sc(12),
                        color: '#999999',
                        width: sc(50),
                        textAlign: 'center',
                        position: 'absolute',
                        zIndex: 100,
                        bottom: sc(-17),
                        left: sc(-25)
                    }}>
                        {data}.{item}斤
                    </Text> : null}
                </View>
            })}

        </View>
    };
    handleListEnd = () => {
        this.fetchMoreData();

        //This is necessary to ensure that activity indicator inside footer gets rendered. This is required given the implementation I have done in this sample
        this.setState({});
    };
    renderFooter = () => {
        //Second view makes sure we don't unnecessarily change height of the list on this event. That might cause indicator to remain invisible
        //The empty view can be removed once you've fetched all the data
        return this.inProgressNetworkReq
            ? <ActivityIndicator
                style={{margin: 100}}
                size="large"
                color={'black'}
            />
            : <View style={{height: 60}}/>;
    };

    handleScroll = (e) => {
        console.log(e.nativeEvent.contentOffset.x);
        this.setState({
            contentOffset: (e.nativeEvent.contentOffset.x),
        })
    }

    render() {
        //Only render RLV once you have the data
        return (
            <View style={styles.container}>
                {/* <ViewSelector
          viewType={this.state.viewType}
          viewChange={this.viewChangeHandler}
        /> */}
                {this.state.count >= 0
                    ? <>
                        <View style={{
                            width: sc(64),
                            height: sc(95),
                            position: 'absolute',
                            top: 0,
                            zIndex: 99,
                            // backgroundColor: 'red',
                            left: (width - sc(64)) / 2,
                            alignItems: 'center',
                            borderWidth: sc(1),
                            borderColor: 'red'
                        }}>
                            <Text style={{
                                height: sc(40),
                                fontSize: sc(26),
                                textAlign: 'center',
                                color: '#22B49C',
                                width: sc(64)
                            }}>{this.state.contentOffset}</Text>
                            <Image style={{width: sc(19.6), height: sc(35), backgroundColor: 'rgba(0,0,0,.1)'}}
                                   resizeMode={'contain'}
                                   source={require('../../../../assets/images/common/Tape.png')}/>
                        </View>
                        <View style={{
                            height: sc(52),
                            marginTop: sc(41),
                            marginHorizontal: sc(10),
                            justifyContent: 'center'
                        }}>
                            <RecyclerListView
                                ref={ref => this.recycler = ref}
                                isHorizontal={true}
                                style={{flex: 1, backgroundColor: '#F6FDFF',}}
                                // contentContainerStyle={{ margin: 30 }}
                                onEndReached={this.handleListEnd}
                                dataProvider={this.state.dataProvider}
                                layoutProvider={this.state.layoutProvider}
                                rowRenderer={this.rowRenderer}
                                renderFooter={this.renderFooter}
                                onScroll={this.handleScroll}
                                renderAheadOffset={1000}
                            />
                        </View>
                    </>
                    : null}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: sc(30),
        // alignItems: 'stretch',
        // justifyContent: 'space-between',
    },
});

配置文件LayoutUtil.js

import React from 'react';
import {Image, Platform, View, TouchableHighlight, Text} from 'react-native';
import {LayoutProvider} from 'recyclerlistview';
import {Dimensions} from 'react-native';
import {sc} from 'react-native-size-matters';

const {width, height} = Dimensions.get('window');

const isIOS = Platform.OS === 'ios';

export class LayoutUtil {
    static getWindowWidth() {
        // To deal with precision issues on android
        return Math.round(Dimensions.get('window').width * 1000) / 1000 - 6; //Adjustment for margin given to RLV;
    }

    static getLayoutProvider(type) {
        switch (type) {
            case 0:
                return new LayoutProvider(
                    () => {
                        return 'VSEL'; //Since we have just one view type
                    },
                    (type, dim, index) => {
                        const columnWidth = LayoutUtil.getWindowWidth() / 3;
                        switch (type) {
                            case 'VSEL':
                                if (index % 3 === 0) {
                                    dim.width = 3 * columnWidth;
                                    dim.height = 300;
                                } else if (index % 2 === 0) {
                                    dim.width = 2 * columnWidth;
                                    dim.height = 250;
                                } else {
                                    dim.width = columnWidth;
                                    dim.height = 250;
                                }
                                break;
                            default:
                                dim.width = 0;
                                dim.heigh = 0;
                        }
                    }
                );
            case 1:
                return new LayoutProvider(
                    () => {
                        return 'VSEL';
                    },
                    (type, dim) => {
                        switch (type) {
                            case 'VSEL':
                                dim.width = LayoutUtil.getWindowWidth() / 2;
                                dim.height = 250;
                                break;
                            default:
                                dim.width = 0;
                                dim.heigh = 0;
                        }
                    }
                );
            case 4:
                return new LayoutProvider(
                    () => {
                        return 'VSEL';
                    },
                    (type, dim) => {
                        switch (type) {
                            case 'VSEL':
                                // dim.width = LayoutUtil.getWindowWidth() / 2;
                                dim.width = sc(81);
                                dim.height = height;
                                break;
                            default:
                                dim.width = 0;
                                dim.heigh = 0;
                        }
                    }
                );
            case 2:
                return new LayoutProvider(
                    () => {
                        return 'VSEL';
                    },
                    (type, dim) => {
                        switch (type) {
                            case 'VSEL':
                                dim.width = LayoutUtil.getWindowWidth();
                                dim.height = 200;
                                break;
                            default:
                                dim.width = 0;
                                dim.heigh = 0;
                        }
                    }
                );
            default:
                return new LayoutProvider(
                    () => {
                        return 'VSEL';
                    },
                    (type, dim) => {
                        switch (type) {
                            case 'VSEL':
                                dim.width = LayoutUtil.getWindowWidth();
                                dim.height = 300;
                                break;
                            default:
                                dim.width = 0;
                                dim.heigh = 0;
                        }
                    }
                );
        }
    }
}

export class DataCall {
    // Just simulating incremental loading, don't infer anything from here
    static async get(start, count) {
        const responseHusky = await fetch('https://dog.ceo/api/breed/husky/images');
        const responseBeagle = await fetch(
            'https://dog.ceo/api/breed/beagle/images'
        );

        const responseJsonHusky = await responseHusky.json();
        const responseJsonBeagle = await responseBeagle.json();

        const fullData = responseJsonHusky.message.concat(
            responseJsonBeagle.message
        );

        const filteredData = fullData.slice(
            start,
            Math.min(fullData.length, start + count)
        );
        return filteredData;
    }
}

export class ImageRenderer extends React.Component {
    shouldComponentUpdate(newProps) {
        console.log(this.props.imageUrl);
        return this.props.imageUrl !== newProps.imageUrl;
    }

    componentWillUpdate() {
        //On iOS while recycling till the new image is loaded the old one remains visible. This forcefully hides the old image.
        //It is then made visible onLoad
        if (isIOS && this.imageRef) {
            this.imageRef.setNativeProps({
                opacity: 0,
            });
        }
    }

    handleOnLoad = () => {
        if (isIOS && this.imageRef) {
            this.imageRef.setNativeProps({
                opacity: 1,
            });
        }
    };

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    // margin: 3,
                    // backgroundColor: 'yellow',
                    // height: 40,
                }}>
                <Image
                    ref={ref => {
                        this.imageRef = ref;
                    }}
                    style={{
                        flex: 1,
                    }}
                    onLoad={this.handleOnLoad}
                    source={{uri: this.props.imageUrl}}
                />
            </View>
        );
    }
}

export class ViewSelector extends React.Component {
    constructor(props) {
        super(props);
        this.currentView = 0;
    }

    shouldComponentUpdate(newProps) {
        return this.props.viewType !== newProps.viewType;
    }

    onPressHandler = () => {
        this.currentView = (this.currentView + 1) % 4;
        this.props.viewChange(this.currentView);
    };

    render() {
        return (
            <TouchableHighlight
                style={{
                    height: 60,
                    paddingTop: 20,
                    backgroundColor: 'black',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                }}
                onPress={this.onPressHandler}>
                <Text style={{color: 'white'}}>
                    Tap to Change View Type: {this.props.viewType}
                </Text>
            </TouchableHighlight>
        );
    }
}

这本来是想用来做滑动输入组件的
但是还没做完，具体滚动值还没来得及换算，以后有时间再完善

呈现的效果图

2022年06月02日16:51:52

RecyclerListView组件之-为什么要选择它作为海量数据列表组件
孟凡涛 的博客
02-23 805
React-Native recyclerlistview组件设计思路讲解、性能比对、内存复用原理
React Native小菜鸡的踩坑排雷记录（5）
miniWhite_2's Blog
05-12 348
一、安卓机型不显示 这一期我们团队把安卓也加进来，一起用RN实现顶层的业务代码，这对安卓同学来说，简直是一个好消息，只用做下底层的桥接。但是，对于我来说，就有点。。咳咳～～，说啥呢，都是可以兼容的～。“有条件，我们要上。没有条件，我们创造条件也要上！” 前期，都是拿着ios模拟器，适配下iphoneX和普屏的iphone。实现还是好办的。所有业务CASE跑通后，测了下安卓效果。 “咦？怎么很多内容...
recyclerlistview：用于React Native和Web的高性能listview！
02-05
RecyclerListView 如果这个项目对您有帮助，请加星号为我们提供支持 :glowing_star: 。 这是React Native和Web的高性能列表视图，支持复杂的布局。 JS仅不受本地依赖，受Android上的RecyclerView和iOS上的UICollectionView的启发。 npm install --save recyclerlistview 对于最新的测试版： npm install --save recyclerlistview@beta 注意：文档将很快升级，现在请检查代码注释以了解其清晰度和探索功能。 该组件也已通过React Native Web进行了积极测试。 概述和
React-Native-recyclerlistview-demo:小型演示，用于测试Flipkart的recyclerlistview，该死的印象不在于大型列表，而且对如何显示数据有很多控制
05-25
React-Native-recyclerlistview-demo 我尝试了flipkart的recylerListView来获取也有一些内部数据的大列表，没有滞后或图像闪烁让它完全惊讶输出 ：
RN(React Native) RecyclerListView 状态更新每隔固定个数就重复
龙腾麟的博客
11-07 419
问题描述：RecyclerListView 中的项，每6项重复显示 我采用的方案 2， 禁用回收机制，但是这种方式与我使用它的目的背道而驰。各位大佬还有什么方案解决这个问题吗？
react native Android 真正回收复用 RecyclerView/ListView
weixin_33743880的博客
09-23 525
2019独角兽企业重金招聘Python工程师标准>>> ...
React Native RecyclerView List 使用指南
gitblog_00971的博客
09-08 1062
React Native RecyclerView List 使用指南 react-native-recyclerview-listA RecyclerView implementation for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-recyclerview-list 1. 项目介绍 React Na...
React Native与Web的高性能列表视图组件：RecyclerListView介绍
RecyclerListView是一个高性能的列表视图组件，专门为React Native和Web应用设计，能够有效处理复杂的布局需求。该组件的名称暗示了它与Android平台上的RecyclerView以及iOS平台上的UICollectionView之间的灵感关联...
React Native高性能大列表视图组件：react-native-big-list
#### React Native高性能列表视图的概念 React Native Big List 是针对React Native平台开发的一款高性能列表视图组件，它特别针对大数量级数据的渲染进行了优化。在处理含有成千上万个项目的列表时，传统的...
React Native与recyclerlistview结合演示：高效数据处理
RecyclerListView是Flipkart开发的一个高性能组件，它解决了在React-Native应用中处理大型列表时经常遇到的性能问题。它提供了类似于原生Android ListView的体验，并且针对滚动性能进行了优化，确保了在大数据集上...
react-native-big-list:这是 React Native 的高性能列表视图，支持复杂的布局，使用类似的 FlatList 用法使替换变得容易。 这个在 React Native 上渲染大列表的列表实现与一个专注于性能和内存使用的回收器一起工作，因此它允许处理列表上的数千个项目
08-03
如果这个项目对你有帮助，请给我们一个star支持 :glowing_star: :blue_book: 描述 这是什么？ 这是 React Native 的高性能列表视图，支持复杂的布局，使用类似的 FlatList 用法使替换变得容易。 这个在 React Native 上渲染大列表的列表实现与一个专注于性能和内存使用的回收器一起工作，因此它允许处理列表上的数千个项目。 您也可以在已发布的 Web 应用程序上试用： 为什么是另一个列表库？ React Native 的 FlatList 很棒，但是当涉及到大列表时，由于其项目缓存，它有一些缺陷。 存在一些替代方案，如react-native-largelist和recyclerlistview但都存在一些问题。 react-native-largelist与 web 和 Expo 不兼容，具有有时需要重新调整和维护的本机代码，有一个奇怪的列表项回收（因为它从来没有空白项）
用RecyclerView实现listView、GridView，以及瀑布流
07-22
用RecyclerView实现listView、GridView，以及瀑布流
React Native RecyclerView List 常见问题解决方案
最新发布
gitblog_01112的博客
12-18 456
React Native RecyclerView List 常见问题解决方案 react-native-recyclerview-list A RecyclerView implementation for React Native ...
RecyclerListView
zhengyongbo的博客
04-10 6431
Android最新组件RecyclerView，替代ListView 时间 2014-10-22 20:08:48 CSDN博客
recyclerlistview
weixin_46460982的博客
06-05 401
RecyclerView的基本用法 和百分比布局类似，RecyclerView也是新增布局，因此需要在项目的build.gradle添加相应的依赖库才行。 打开app/build.gradle文件，在dependencies闭包中添加如下内容 implementation 'androidx.recyclerview:recyclerview:1.0.0' 首先为RecyclerView准备一个适配器， 新建FruitAdapter类，让它继承RecyclerView.Adapter， 其中泛型指定为F
React Native之调用安卓的原生控件recyclerview
fox_wei的博客
04-07 1304
今天学习了React Native关于一些安卓的调用的。但是网络上面的很少关于recyclerview等这样的高级的分装。主要可能会偏向简单的一些Toast ，Log这些原生控件。 现在我就来讲解一下关于高级一点的控件。以及如何使用会更加方便。我是安卓开发的。所以在调用安卓的时候。我第一个想到的是去开android studio这个。所以我尝试了一下，效果如下，看起来很不错的样子。因为今天我遇到
android react native 高性能listview实现
skyblue126的专栏
07-29 6014
react native 可以说是目前移动端最火的跨平台开发框架。给我感觉是开发一些简单界面没有问题，交互复杂的功能坑还是比较多。虽然坑很多，但是依然很火，我想主要有两点比较吸引人：    1. js开发界面，可以各个平台运行。    2. 热更新，大有取代apk插件化开发的趋势。当然apk实现插件化坑也很多，目前没有一个完善的解决方案，貌似也是在国内用得比较多，插件化在google基本都搜不
RecyclerListView 教程
gitblog_00751的博客
08-10 406
RecyclerListView 教程 recyclerlistviewHigh performance listview for React Native and web!项目地址:https://gitcode.com/gh_mirrors/re/recyclerlistview 1. 项目目录结构及介绍 在 recyclerlistview 项目中，目录结构大致如下： - docs ...
RN 使用RecyclerListView实现公用列表组件-记录
qq_41878758的博客
09-07 477
【代码】RN 使用RecyclerListView实现公用列表组件-记录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值