第八章、ReactNative 用ListView实现GridView效果

最新推荐文章于 2019-08-20 00:22:08 发布
最新推荐文章于 2019-08-20 00:22:08 发布
阅读量1.2k 收藏
点赞数
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzhen200638/article/details/78271294
版权
本文介绍了如何在ReactNative中使用ListView组件实现GridView效果。通过示例代码详细展示了数据构造和GridView封装的关键步骤，适用于需要在应用中创建网格布局的开发者。
摘要由CSDN通过智能技术生成
ReactNative 用ListView实现GridView效果

直接上代码，多说无用. 先构造数据;

//构造数据
request() {
    const rowData = Array.from(new Array(15))
            .map((value, index) => ({text: "item " + index, clicked: 0}))
            .concat(this.state.listData);

    this.setState({
            isRefresh: false,
            listData: rowData,
        });
    }

根据实际情况封装你的GridView,这里简单展示实现的关键点


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  无枝可依
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
React Native之常用第三方库

				
			

			

				

					xiangzhihong8的专栏
				

				

					01-01
					
					1万+
					
				

			

		

		

			
				
前言React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。 
那么我们今天说说在React Native

			
		

	



                

              
                



	

		

			

				
					
React Native组件只Image

				
			

			

				

					xiangzhihong8的专栏
				

				

					12-10
					
					2096
					
				

			

		

		

			
				
不管在Android还是在ios原生的开发中，图片都是作为控件给出来的，在RN中也有这么一个控件（Image）。根据官网的资料，图片分为本地静态图片，网络图片和混合app资源。一下分类介绍来源官网。静态图片资源从0.14版本开始，React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引

			
		

	



                


  
              

                


	

		

			

				
					
React Native SectionList控件通过封装数据来实现gridView布局样式

				
			

			

				

					shyzh_li的专栏
				

				

					05-04
					
					3051
					
				

			

		

		

			
				
SectionList是React Native在0.43版本推出的高性能分组列表组件，主要的功能有：支持水平布局，支持单独的头、尾部组件，自定义行间分割线，上拉、下拉刷新。这篇文章主要描述通过封装数据源来实现宫格样式的布局，1、初始化SectionList组件，数据源的封装稍后讲解<SectionList style={{marginTop:64, backgroundColor:'#f2...

			
		

	





	

		

			

				
					
ReactNative实现GridView

				
			

			

				

					weixin_30721077的博客
				

				

					09-10
					
					156
					
				

			

		

		

			
				
ReactNative内置了ListView组件但是没有类似GridView这样的组件。利用一些已经有的属性是可以实现GridView的，利用ContentContainerStyle的属性然后配合样式就可以实现GridView。
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,...

			
		

	



		

			
		



	

		

			

				
					
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

			
		

	





	

		

			

				
					
Android 可拖拽的GridView效果实现,  长按可拖拽和item实时交换

				
			

			

				

					xiaoheliushuiya
				

				

					01-06
					
					479
					
				

			

		

		

			
				
转帖请注明本文出自xiaanming的博客（http://blog.csdn.net/xiaanming/article/details/17718579），请尊重他人的辛勤劳动成果，谢谢！
在Android开发中，我们常常用到ListView和GridView，而有的时候系统的ListView，GridView并不能满足我们的需求，所以我们需要自己定义一个ListView或者GridView,我...

			
		

	





	

		

			

				
					
ReactNative基础（四）了解ListView的使用、实现GridView效果、编写一个真实网络请求案例

				
			

			

				

					上辈子作恶多端，这辈子写前端。
				

				

					09-29
					
					2506
					
				

			

		

		

			
				
ListView简介
  一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）ListView文档同时它还有

			
		

	





	

		

			

				
					
ReactNative中SectionList实现条目GridView效果

				
			

			

				

					qq_35508626的博客
				

				

					09-11
					
					731
					
				

			

		

		

			
				
在ReactNative，想做个Android中分组GridView的效果，搜索了半天没找到解决办法，于是自己瞎摸索出来了一套效果，目前就是用SectionList嵌套FlatList

			
		

	





	

		

			

				
					
Flutter基础（七）Scrolling Widget之ListView、GridView、PageView

				
			

			

				

					Android进阶三部曲 - 刘望舒
				

				

					08-19
					
					1074
					
				

			

		

		

			
				
本文首发于公众号「刘望舒」


ReactNative入门系列
React Native组件
Flutter基础系列
前言
我们知道Widget的分类有很多种，比如：Basics、Material Components、Cupertino、Scrolling等等，在前面的文章我介绍了Basics和Material Components，这一篇讲一下Scrolling分类中比较常用的ListVie...

			
		

	





	

		

			

				
					
react-native-easy-listview-gridview:React Native中ListView和GridView的包装器库

				
			

			

				

					04-28
				

			

		

		

			
				
react-native-easy-listview-gridview
 这是React Native中ListView和GridView的包装库。
样本
列表显示
网格视图
特征
拉刷新
到达列表视图或网格视图的末尾时加载更多
内容为空时列表视图或网格视图的自定义背景
自定义样式的RefreshControl
 自定义页眉，页脚，分隔符等
TIMEOUT加载处理程序
性能优化
更多即将推出！
安装
运行npm install react-native-easy-listview-gridview --save
 import EasyListView from 'react-native-easy-listview-gridview'
用法
列表显示
import React , { Component } from 'react'
import {
  Text ,
  View ,


			
		

	





	

		

			

				
					
react-native-ultimate-listview：高性能FlatList，提供自定义的“拉动刷新” | 自动分页和无限滚动| gridview布局| 可滑动行

				
			

			

				

					02-05
				

			

		

		

			
				
React本机终极Listview
 该库包括两个组件： UltimateListView和UltimateRefreshView
 UltimateListView ：高性能FlatList，提供自定义的“拉动刷新” | 自动分页和无限滚动| gridview布局| 可滑动行。 我为您完成了最棘手的部分的真正终极版本，与正式版本相比，您可以将此模块视为具有所有出色额外功能的增强型FlatList 。
 UltimateRefreshView ：一个可刷新的ScrollView，提供自定义的“按需刷新”功能，该功能已在UltimateListView中使用，但可以单独使用。
 此模块支持iOS

			
		

	





	

		

			

				
					
ReactNative-Grid-List

				
			

			

				

					04-07
				

			

		

		

			
				
:foggy: 网格列表组件
安装
yarn add react-native-grid-list
或者
npm install react-native-grid-list --save
例子
世博会
代码
import React , { PureComponent } from 'react' ;
import { View , StyleSheet , Image } from 'react-native' ;
import GridList from 'react-native-grid-list' ;
const items = [
  { thumbnail : { uri : 'https://lorempixel.com/200/200/animals' } } ,
  { thumbnail : { uri : 'https://lorempixel.com/200/200/cit

			
		

	





	

		

			

				
					
ReactNative列表ListView的用法

				
			

			

				

					08-29
				

			

		

		

			
				
本篇文章主要介绍了ReactNative列表ListView的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Flutter基础（十三）Flutter与Android的相互通信

				
			

			

				

					Android进阶三部曲 - 刘望舒
				

				

					08-20
					
					3396
					
				

			

		

		

			
				
本文首发于公众号「刘望舒」


ReactNative入门系列
React Native组件
Flutter基础系列
前言
本来这篇文章应该讲一下Flutter的插件开发，但是在插件开发的基础是PlatformChannel，也就是Flutter与Android/iOS Native的通信，理解了这一个知识点，Flutter的插件开发也就不在话下。
1.PlatformChannel概述
Flu...

			
		

	





	

		

			

				
					
react native 九宫格

				
			

			

				

					weixin_42286434的博客
				

				

					07-25
					
					343
					
				

			

		

		

			
				

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    TextInput,
    ListView,
    TouchableOpacity,
    Image,
    ScrollView,
    Text,
    Alert,
    View
} from ...

			
		

	





	

		

			

				
					
React Native之ListView实现九宫格效果

					
热门推荐

				
			

			

				

					xiangzhihong8的专栏
				

				

					12-11
					
					1万+
					
				

			

		

		

			
				
概述在安卓原生开发中，ListView是很常用的一个列表控件，那么React Native（RN）如何实现该功能呢？我们来看一下ListView的源码ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性：dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。renderRow：渲染某一行，类似于BaseAdapter中的getI

			
		

	





	

		

			

				
					
React Native使用ListView创建九宫格教程

				
			

			

				

					
				

			

		

		

			
				
"React Native之ListView实现九宫格效果的示例"  React Native是一个流行的JavaScript框架，用于构建原生移动应用程序。在Android原生开发中，ListView是一个常用的组件，用于展示可滚动的列表数据。而在React ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值