React Native 之ListView及九宫格布局

最新推荐文章于 2019-05-27 09:31:02 发布
最新推荐文章于 2019-05-27 09:31:02 发布
阅读量2.1k 收藏
点赞数
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyt199011302/article/details/54911743
版权
本文详细介绍了React Native中的ListView组件，强调其适用于长列表数据的渲染，通过DataSource创建并实例化ListView，重点讲解了renderRow、rowHasChanged等关键属性以及性能优化方法。此外，还提到了九宫格布局的应用。
摘要由CSDN通过智能技术生成

ListView

ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

ListView更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

1). 首先创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组；

2). 使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件(该就是列表的每一行的item)。


1. 必要属性

dataSource: 设置列表的数据源

最低0.47元/天 解锁文章
沐云落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native控件之ListView
xiangzhihong8的专栏
05-03 2655
概述ListView作为核心组件之一，主要用于高效地显示一个可以垂直滚动的变化的数据列表。经过自定义组装，我们还可以用它实现九宫格等页面效果。 在React Native中，使用ListView组件至少需要两个属性：DataSource和renderRow。DataSource是需要渲染界面的数据源，renderRow是根据数据源的元素返回的可渲染的组件，即ListView的一行。 在React
React Native之ListView实现九宫格效果
热门推荐
xiangzhihong8的专栏
12-11 1万+
概述在安卓原生开发中，ListView是很常用的一个列表控件，那么React Native（RN）如何实现该功能呢？我们来看一下ListView的源码ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性：dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。renderRow：渲染某一行，类似于BaseAdapter中的getI
react native 九宫格
weixin_42286434的博客
07-25 342
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, ListView, TouchableOpacity, Image, ScrollView, Text, Alert, View } from ...
React-Native ListView
bravegogo的专栏
01-18 1677
转自：http://www.jianshu.com/p/f39f75cf3e38 我的React-Native不得不说的一些事情－5 ListView 作用 ListView在APP的作用可谓是重中之重，除非你不需要要多信息展示，否则的话，一个APP肯定是要用ListView来工作的。而优化它，也是必须的。 简单代码 'use strict' impor
ReactNative之ListView
OSASK
08-05 278
ListView跟FlatList功能差不多。。。使用方法略有不同 使用前引入。。。 首先创建一个有很多数据的数组 var arr = [..................]; 然后使用这个数组构建一个ListView的数据源对象 This.state = { ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==
react-native 的ListView
wangrong111222的博客
12-19 365
虽然说ListView 快废弃了 但是花了一晚上事情去研究这个东西 还是想要记录一下。 权当 其他组件的指南吧。 import React,{Component} from 'react'; import {View, Text,StyleSheet, TouchableOpacity,Image,ListView,RefreshControl} from 'react-native'; im...
React Native之ListView实现九宫格效果的示例
08-29
React Native 是一个流行的开源...总结来说，React Native的ListView 结合适当的样式设置，可以方便地实现九宫格效果，提供了灵活的数据展示方式。开发者可以根据自己的需求调整样式和数据源，以满足不同的应用场景。
[RN] React Native 使用 FlatList 实现九宫格布局 GridList
weixin_30550081的博客
05-12 1130
React Native 使用 FlatList 实现九宫格布局 先看图片演示实例： 本文以图片列表为例，实现九宫格布局！ 主要有两种方法： 1）方法一： 利用FlatList的 numColumns ={2} // 一行2个 2）方法二： 利用 FlatList的 contentContainerStyle={styles.listVie...
React-Native 中的ListView
mcy456的博客
06-29 3098
一、简介          讲到ListView,做为android研发的我感觉十分的亲切，毕竟同名同意。基本上，除了几个别的app之外，难得会有app不用ListView(当然，也有新出的RecyclerView)。好吧，这就走进ReactNative中的ListView。 二、ListView的demo(基于官方)         官方给出了一个极简的ListView demo（
React-Native ListView 实现带标题的列表
08-13
React-Native ListView 实现带标题的列表
ReactNative列表ListView的用法
08-29
本篇文章主要介绍了ReactNative列表ListView的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何实现一个React Native抽奖九宫格
weixin_34178244的博客
05-27 355
本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘，先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布局 布局很简单，我们可以采用flex 3行布局，也可以单行、配合flex-wrap子控件自动折行实现。直接上代码 const LotteryStyle = StyleSheet.create({ contain...
React Native开发之——组件ListView
我的博客
03-14 543
前言ListView是React Native中渲染大量数据的组件，ListView是日常开发最常用的控件之一，会话列表（微信），商品列表（淘宝），问题列表（汽车大师）等等各种列表均用到了ListView。这篇文章简单介绍下ListView的入门。ListView概念使用ListView必须熟悉以下几个属性dataSourcerenderRowrowHasChangeddataSource和ren...
ReactNative ListView 组件
GL_MINE_CSDN的博客
06-23 297
ReactNative ListView 组件 import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, RefreshControl, ListView, } from 'react-native';
React Native （三）ListView
runrun117的博客
03-29 800
上一篇介绍了React Native页面跳转、传值；本地保存用户信息；还有fetch网络请求。今天来介绍一下ListView列表。为了显示网上列表信息，RN为我们提供了ListView标签，和Android原生的差不多。首先要定义一行的样式，然后将获取到的网络上的数据放入，最后渲染。1、设置样式renderMovie(movie) {//他要绑定this,签名！！！this，不绑定的的时候不知道t...
react-native listview使用
gaiyaguang的博客
05-03 2111
listview是我们应用中的一个组件，用它我们可以展示列表数据。react-native为我们提供了ListView组件，方便我们实现列表数据展示。1.引入ListView组件：import { StyleSheet, ListView, View, Text, Image }from 'react-native';2.构造函数中初始化ListView的数据
React Native之九宫格布局
spicyboiledfish的博客
06-30 2164
九宫格的布局，其实大家都耳熟能详了，那么如何用react native来开发九宫格布局呢？ 首先，贴上UI需求图： 对于以上的布局，虽然目前图片还是很少，还是希望大家可以用最优雅的方式开发代码，简洁好看，复用性也高。 开发的思想： 将图片的所有信息（包括URL地址，图片文字，是否是大图还是小图等等）都整合在一个对象里面，可以在当前模块中数据传递，也可以支持从上级传递
React-Native学习之路（七）ListView
Leon_Jcy的博客
07-24 867
ListView 2018年7月22日 15:53 一、实现ListView基本显示中的两个必要属性： 1）.dataSource:         dataSource是ListView的数据源，首先在state中去创建一个ListView.DataSource数据源，然后通过cloneWithRows方法为其传递一个数组，其中提供给数据源的rowHasChanged函数可以告诉Lis...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值