React Native之ListView实现九宫格效果

最新推荐文章于 2020-03-03 21:53:15 发布
最新推荐文章于 2020-03-03 21:53:15 发布
阅读量1.2w 收藏 6
点赞数 4
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangzhihong8/article/details/53572824
版权
这篇博客介绍了如何在React Native中利用ListView组件实现九宫格效果。ListView基于ScrollView，具备如dataSource、renderRow等属性。为了创建网格布局，可以通过设置pageSize确定网格数，并结合flexWrap属性的wrap功能实现自动换行，从而达到类似安卓GridView的效果。
摘要由CSDN通过智能技术生成

概述

在安卓原生开发中，ListView是很常用的一个列表控件，那么React Native（RN）如何实现该功能呢？我们来看一下ListView的源码


ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性：

dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。
renderRow：渲染某一行，类似于BaseAdapter中的getItem方法。
onEndReached：简单说就是用于分页操作，在安卓中原生开发中，我们需要自己实现相应的方法。
onEndReachedThreshold：调用onEndReached之前的临界值，单位是像素。
refreshControl：指定RefreshControl组件，用于为ScrollView提供下拉

了解本专栏 订阅专栏 解锁全文 超级会员免费看
xiangzhihong8
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
订阅专栏
[RN] React Native 使用 FlatList 实现九宫格布局 GridList
weixin_30550081的博客
05-12 1135
React Native 使用 FlatList 实现九宫格布局 先看图片演示实例： 本文以图片列表为例，实现九宫格布局！ 主要有两种方法： 1）方法一： 利用FlatList的 numColumns ={2} // 一行2个 2）方法二： 利用 FlatList的 contentContainerStyle={styles.listVie...
第八章、ReactNative 用ListView实现GridView效果
chenzhen200638的专栏
10-18 1228
ReactNative 用ListView实现GridView效果 直接上代码，多说无用. 选构造数据; //构造数据 request() { const rowData = Array.from(new Array(15)) .map((value, index) => ({text: "item " + index, clicked: 0}))
react native 九宫格
weixin_42286434的博客
07-25 343
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, ListView, TouchableOpacity, Image, ScrollView, Text, Alert, View } from ...
ReactNative实现GridView
weixin_30721077的博客
09-10 156
ReactNative内置了ListView组件但是没有类似GridView这样的组件。利用一些已经有的属性是可以实现GridView的，利用ContentContainerStyle的属性然后配合样式就可以实现GridView。 import React, {Component} from 'react'; import { StyleSheet, Text, View,...
react native 九宫格布局
周家大小姐
03-03 568
主要计算方式: // 获取屏幕宽度 let screenW = Dimensions.get('window').width; // 设置列,img宽高 let cols = 3, boxW = 100, boxH = 120; // 设置水平间距 let hMargin = (screenW - boxW * cols...
用ListView实现九宫格布局
08-12 3151
相关技术点： 通常情况下，我们对ListView的操作是纵向的，如果是横向的，则需要设置ListView的contentContainerStyle属性，添加flexDirection:‘row’让多个ListView在同一行显示，而且通过flexWrap:’wrap’进行换行。运行效果图： 代码如下：/** * Sample React Native App * https
React Native之ListView实现九宫格效果的示例
12-09
概述 在安卓原生开发中，ListView是很常用的一个列表控件，那么React Native（RN）如何实现该功能呢？我们来看一下ListView的源码 ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性： dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。 renderRow：渲染某一行，类似于BaseAdapter中的getItem方法。 onEndReached：简单说就是用于分页操作，在安卓中原生开发中，我们需要自己实现相应的方法。 onEndReachedThreshold：调用onEndReac
React Native 之ListView及九宫格布局
jyt婷的博客
02-07 2156
移动设备上的手势识别要比在web上复杂得多。用户的一次触摸操作的真实意图是什么，App要经过好几个阶段才能判断。比如App需要判断用户的触摸到底是在滚动页面，还是滑动一个widget，或者只是一个单纯的点击。甚至随着持续时间的不同，这些操作还会转化。此外，还有多点同时触控的情况。 触摸响应系统可以使组件在不关心父组件或子组件的前提下自行处理触摸交互。具体的实现在ResponderEventP
ListView的两种实现方法
12-02
ListView的两种实现方法 1、继承自AppCompactActivity，使用listview控件 2、继承自ListActivity
react-native-ultimate-listview：高性能FlatList，提供自定义的“拉动刷新” | 自动分页和无限滚动| gridview布局| 可滑动行
02-05
React本机终极Listview 该库包括两个组件： UltimateListView和UltimateRefreshView UltimateListView ：高性能FlatList，提供自定义的“拉动刷新” | 自动分页和无限滚动| gridview布局| 可滑动行。 我为您完成了最棘手的部分的真正终极版本，与正式版本相比，您可以将此模块视为具有所有出色额外功能的增强型FlatList 。 UltimateRefreshView ：一个可刷新的ScrollView，提供自定义的“按需刷新”功能，该功能已在UltimateListView中使用，但可以单独使用。 此模块支持iOS
react-native-bottom-sheet：具有完全可配置选项的高性能交互式底部表:rocket:
02-05
React本机底表 高性能的交互式底表，具有完全可配置的选项 :rocket: 产品特点 :glowing_star: 模态表示视图，。 流畅的交互和捕捉动画。 支持FlatList ， SectionList ， ScrollView和View滚动交互。 支持React Navigation Integration。 与Reanimated v1和v2兼容。 兼容Expo 。 辅助功能支持。 用TypeScript编写。 。 入门 请查阅。 版本控制 该库是用Reanimated 2个版本编写的，并将这两个实现都保留在2个单独的分支中： 版本2 此版本是使用Reanimated v1编写的，并且与Reanim
ReactNative的响应式网格包含RTL布局支持
08-10
React Native的响应式网格包含RTL布局支持
React Native之SectionList使用扩展-九宫格
Tiger的专栏
05-17 1244
实现九宫格的几种方式(两种) 1.通过设置SectionList的contentContainerStyle属性实现 实现思路说明如下 a.添加contentContainerStyle属性样式 contentContainerStyle={ // 主轴方向横向显示，所有内容横向显示 flexDirection:'row', // 设置此属性为了一行显示不下,换一行 flexWrap:'...
react-native 之九宫格列表
岁月静好，善待时光。
08-17 2759
先上效果图: 就是类似这种的列表. 在 iOS 中有 UICollectionView 可以直接写这种类型的列表, 但在React-native 中直接就可以用 FlatList 完成, 也就是说这种类型的列表和普通的列表没什么区别, 只是在布局的时候要些许的差异. Let’s do it! 1.渲染一个列表 render() { return ( ...
React Native SectionList控件通过封装数据来实现gridView布局样式
shyzh_li的专栏
05-04 3049
SectionList是React Native在0.43版本推出的高性能分组列表组件，主要的功能有：支持水平布局，支持单独的头、尾部组件，自定义行间分割线，上拉、下拉刷新。这篇文章主要描述通过封装数据源来实现宫格样式的布局，1、初始化SectionList组件，数据源的封装稍后讲解<SectionList style={{marginTop:64, backgroundColor:'#f2...
ReactNative 中 ListView实现GridView效果
热门推荐
LGD_Sunday的专栏
10-20 1万+
在RN中ListVIew拥有ScrollView的所有属性，所以可以吧ListView当成是ScrollView的一种延伸，在RN中虽然不存在父子类，不过我觉的可以把 ListView当成ScrollView的子类来看。 所以改变ListView的排列方式其实就是改变lIstView的主轴的方向。/** * Sample React Native App * https://github.co
ReactNative中SectionList实现条目GridView效果
qq_35508626的博客
09-11 729
在ReactNative，想做个Android中分组GridView的效果，搜索了半天没找到解决办法，于是自己瞎摸索出来了一套效果，目前就是用SectionList嵌套FlatList
React Native使用ListView创建九宫格教程
"React Native之ListView实现九宫格效果的示例" React Native是一个流行的JavaScript框架，用于构建原生移动应用程序。在Android原生开发中，ListView是一个常用的组件，用于展示可滚动的列表数据。而在React ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzhihong8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值