React Native_React Native组件(ListViewFlatListSectionList)

ListView

不分组Demo
heros.json

[{"image": "1.jpg","title": "有关斯维因的最早记载出现在诺克萨斯养老院一名医生的笔记上。据载，斯维因一瘸一拐地走进病房，没有叫喊也没有抱怨，他的右腿被折成两段，骨头破皮而出。他的肩膀上站着一只阴森的小鸟，仿佛是黏在他肩上似的...","name": "策士统领·斯维因"},{"image": "2.jpg","title": "拉克丝天生就属于显赫的皇冠卫队，出自德玛西亚的模范家庭她注定要成就一番伟业。","name": "光辉女郎·拉克丝"},{"image": "3.jpg","title": "古书里将其称为复仇焰魂。这个一个充满灼热仇恨的生物，它的存在就是为了将人类和约德尔人生存的地方夷为平地。","name": "复仇焰魂·布兰德"},{"image": "4.jpg","title": "太阳的光芒笼罩着符文大陆，而其化身也势必如此。-蕾欧娜","name": "曙光女神·蕾欧娜"},{"image": "5.jpg","title": "于生者而言，掘墓人的工作不可或缺，而在暗影岛，掘墓人的价值更不可估量","name": "掘墓者·约里克"},{"image": "6.jpg","title": "通往全知的第一步是发现自己的无知。&apos;——易大师的第一课","name": "齐天大圣·孙悟空"},{"image": "7.jpg","title": "人类尚未学会控制他们的魔法——因为卡拉曼达已经变成了历史长河中的一条水晶疮疤（意指新地图水晶之痕）。","name": "水晶先锋·斯卡纳"}
]

记得把图片扔到Xocde里面，Andrio以后再适配

App.js

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,ListView,Image,TouchableOpacity,AlertIOS
} from 'react-native';//导入json数据
var Heros = require('./heros.json');//数组
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');export default class ListViewTest1 extends Component {//构造函数中初始化数据constructor(props){super(props);var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2});this.state={dataSource:ds.cloneWithRows(Heros)};}render() {return (<ListViewstyle={{marginTop:25}}dataSource = {this.state.dataSource}//设置数据源renderRow = {this.renderRow}/>);}//返回具体的CellrenderRow(rowData, sectionID, rowID, highlightRow){return(<TouchableOpacity activeOpacity={0.5}onPress={()=>{AlertIOS.alert('购买成功!','成功解锁'+rowData.name+'英雄!')}}><View style={styles.cellViewStyle}>{/*左边的图片*/}<Image source={{uri:rowData.image}} style={styles.leftImageStyle}/>{/*右边的View*/}<View style={styles.rightViewStyle}>{/*上面是英雄名称*/}<Text style={styles.topTitleStyle}>{rowData.name}</Text>{/*下面是英雄描述*/}<Text style={styles.bottomTitleStyle}numberOfLines={3}>{rowData.title}</Text></View></View></TouchableOpacity>)}
}const styles = StyleSheet.create({cellViewStyle:{//分割线borderBottomWidth:0.5,borderBottomColor:'#e8e8e8',//cell内部缩一下padding:10,//主轴横过来flexDirection:'row'},leftImageStyle:{width:60,height:60,marginRight:15},rightViewStyle:{},topTitleStyle:{fontSize:20,},bottomTitleStyle:{width:width * 0.7,marginTop:8}
});

分组写法

{"data": [{"cars": [{"icon": "m_180_100.png","name": "AC Schnitzer"},{"icon": "m_92_100.png","name": "阿尔法·罗密欧"},{"icon": "m_9_100.png","name": "奥迪"},{"icon": "m_97_100.png","name": "阿斯顿·马丁"}],"title": "A"},{"cars": [{"icon": "m_172_100.png","name": "巴博斯"},{"icon": "m_157_100.png","name": "宝骏"},{"icon": "m_3_100.png","name": "宝马"},{"icon": "m_82_100.png","name": "保时捷"},{"icon": "m_163_100.png","name": "北京汽车"},{"icon": "m_211_100.png","name": "北汽幻速"},{"icon": "m_168_100.png","name": "北汽威旺"},{"icon": "m_14_100.png","name": "北汽制造"},{"icon": "m_2_100.png","name": "奔驰"},{"icon": "m_59_100.png","name": "奔腾"},{"icon": "m_26_100.png","name": "本田"},{"icon": "m_5_100.png","name": "标致"},{"icon": "m_127_100.png","name": "别克"},{"icon": "m_85_100.png","name": "宾利"},{"icon": "m_15_100.png","name": "比亚迪"},{"icon": "m_135_100.png","name": "布加迪"}],"title": "B"},{"cars": [{"icon": "m_129_100.png","name": "昌河"}],"title": "C"},{"cars": [{"icon": "m_113_100.png","name": "道奇"},{"icon": "m_165_100.png","name": "大通"},{"icon": "m_8_100.png","name": "大众"},{"icon": "m_27_100.png","name": "东风"},{"icon": "m_197_100.png","name": "东风风度"},{"icon": "m_141_100.png","name": "东风风神"},{"icon": "m_115_100.png","name": "东风风行"},{"icon": "m_205_100.png","name": "东风小康"},{"icon": "m_29_100.png","name": "东南"},{"icon": "m_179_100.png","name": "DS"}],"title": "D"},{"cars": [{"icon": "m_91_100.png","name": "法拉利"},{"icon": "m_199_100.png","name": "飞驰商务车"},{"icon": "m_164_100.png","name": "菲斯克"},{"icon": "m_40_100.png","name": "菲亚特"},{"icon": "m_7_100.png","name": "丰田"},{"icon": "m_67_100.png","name": "福迪"},{"icon": "m_190_100.png","name": "弗那萨利"},{"icon": "m_208_100.png","name": "福汽启腾"},{"icon": "m_17_100.png","name": "福特"},{"icon": "m_128_100.png","name": "福田"}],"title": "F"},{"cars": [{"icon": "m_109_100.png","name": "GMC"},{"icon": "m_110_100.png","name": "光冈"},{"icon": "m_147_100.png","name": "广汽"},{"icon": "m_63_100.png","name": "广汽吉奥"},{"icon": "m_133_100.png","name": "广汽日野"},{"icon": "m_182_100.png","name": "观致汽车"}],"title": "G"},{"cars": [{"icon": "m_31_100.png","name": "哈飞"},{"icon": "m_196_100.png","name": "哈弗"},{"icon": "m_170_100.png","name": "海格"},{"icon": "m_32_100.png","name": "海马"},{"icon": "m_149_100.png","name": "海马商用车"},{"icon": "m_181_100.png","name": "恒天汽车"},{"icon": "m_58_100.png","name": "红旗"},{"icon": "m_52_100.png","name": "黄海"},{"icon": "m_112_100.png","name": "华泰"},{"icon": "m_45_100.png","name": "汇众"}],"title": "H"},{"cars": [{"icon": "m_35_100.png","name": "江淮"},{"icon": "m_37_100.png","name": "江铃"},{"icon": "m_38_100.png","name": "江南"},{"icon": "m_98_100.png","name": "捷豹"},{"icon": "m_143_100.png","name": "吉利帝豪"},{"icon": "m_144_100.png","name": "吉利全球鹰"},{"icon": "m_148_100.png","name": "吉利英伦"},{"icon": "m_39_100.png","name": "金杯"},{"icon": "m_57_100.png","name": "金龙联合"},{"icon": "m_161_100.png","name": "金旅客车"},{"icon": "m_152_100.png","name": "九龙"},{"icon": "m_4_100.png","name": "Jeep"}],"title": "J"},{"cars": [{"icon": "m_188_100.png","name": "卡尔森"},{"icon": "m_107_100.png","name": "凯迪拉克"},{"icon": "m_150_100.png","name": "开瑞"},{"icon": "m_51_100.png","name": "克莱斯勒"},{"icon": "m_145_100.png","name": "科尼塞克"},{"icon": "m_212_100.png","name": "KTM"}],"title": "K"},{"cars": [{"icon": "m_86_100.png","name": "兰博基尼"},{"icon": "m_200_100.png","name": "蓝海房车"},{"icon": "m_80_100.png","name": "劳斯莱斯"},{"icon": "m_94_100.png","name": "雷克萨斯"},{"icon": "m_99_100.png","name": "雷诺"},{"icon": "m_146_100.png","name": "莲花"},{"icon": "m_153_100.png","name": "猎豹汽车"},{"icon": "m_76_100.png","name": "力帆"},{"icon": "m_16_100.png","name": "铃木"},{"icon": "m_166_100.png","name": "理念"},{"icon": "m_95_100.png","name": "林肯"},{"icon": "m_36_100.png","name": "陆风"},{"icon": "m_96_100.png","name": "路虎"},{"icon": "m_83_100.png","name": "路特斯"}],"title": "L"},{"cars": [{"icon": "m_183_100.png","name": "迈凯伦"},{"icon": "m_93_100.png","name": "玛莎拉蒂"},{"icon": "m_18_100.png","name": "马自达"},{"icon": "m_79_100.png","name": "MG"},{"icon": "m_81_100.png","name": "MINI"},{"icon": "m_201_100.png","name": "摩根"}],"title": "M"},{"cars": [{"icon": "m_155_100.png","name": "纳智捷"}],"title": "N"},{"cars": [{"icon": "m_104_100.png","name": "欧宝"},{"icon": "m_84_100.png","name": "讴歌"},{"icon": "m_171_100.png","name": "欧朗"}],"title": "O"},{"cars": [{"icon": "m_156_100.png","name": "启辰"},{"icon": "m_43_100.png","name": "庆铃"},{"icon": "m_42_100.png","name": "奇瑞"},{"icon": "m_28_100.png","name": "起亚"}],"title": "Q"},{"cars": [{"icon": "m_30_100.png","name": "日产"},{"icon": "m_78_100.png","name": "荣威"},{"icon": "m_142_100.png","name": "瑞麒"}],"title": "R"},{"cars": [{"icon": "m_25_100.png","name": "三菱"},{"icon": "m_209_100.png","name": "山姆"},{"icon": "m_195_100.png","name": "绅宝"},{"icon": "m_50_100.png","name": "双环"},{"icon": "m_102_100.png","name": "双龙"},{"icon": "m_111_100.png","name": "斯巴鲁"},{"icon": "m_10_100.png","name": "斯柯达"},{"icon": "m_89_100.png","name": "smart"}],"title": "S"},{"cars": [{"icon": "m_202_100.png","name": "泰卡特"},{"icon": "m_189_100.png","name": "特斯拉"}],"title": "T"},{"cars": [{"icon": "m_140_100.png","name": "威麟"},{"icon": "m_186_100.png","name": "威兹曼"},{"icon": "m_19_100.png","name": "沃尔沃"},{"icon": "m_48_100.png","name": "五菱"}],"title": "W"},{"cars": [{"icon": "m_13_100.png","name": "现代"},{"icon": "m_174_100.png","name": "星客特"},{"icon": "m_71_100.png","name": "新凯"},{"icon": "m_87_100.png","name": "西雅特"},{"icon": "m_49_100.png","name": "雪佛兰"},{"icon": "m_6_100.png","name": "雪铁龙"}],"title": "X"},{"cars": [{"icon": "m_194_100.png","name": "扬州亚星客车"},{"icon": "m_138_100.png","name": "野马汽车"},{"icon": "m_100_100.png","name": "英菲尼迪"},{"icon": "m_53_100.png","name": "一汽"},{"icon": "m_41_100.png","name": "依维柯"},{"icon": "m_75_100.png","name": "永源"}],"title": "Y"},{"cars": [{"icon": "m_136_100.png","name": "长安轿车"},{"icon": "m_159_100.png","name": "长安商用"},{"icon": "m_21_100.png","name": "长城"},{"icon": "m_203_100.png","name": "之诺"},{"icon": "m_60_100.png","name": "中华"},{"icon": "m_167_100.png","name": "中欧"},{"icon": "m_77_100.png","name": "众泰"},{"icon": "m_204_100.png","name": "中通客车"},{"icon": "m_33_100.png","name": "中兴"}],"title": "Z"}]
}

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*//*** cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)* dataBlob  就是数据!具体类型是一个对象Object!* sectionID 哪一组!* rowID     哪一行!* */import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,ListView,Image,TouchableOpacity,
} from 'react-native';var Car = require('./Car.json');export default class ListViewTest2 extends Component {//构造函数constructor(props){super(props);var getSectionData = (dataBlob,sectionID)=>{return dataBlob[sectionID];};var getRowData = (dataBlob,sectionID,rowID) =>{return dataBlob[sectionID+':'+rowID];};this.state={dataSource:new ListView.DataSource({getSectionData:getSectionData,//获取组数据getRowData:getRowData,//获取数据rowHasChanged:(r1,r2) => r1 !== r2,sectionHeaderHasChanged:(s1,s2) => s1 !== s2})}}render() {return (<View style={styles.container}>{/*头部Nav*/}<View style={styles.NavViewStyle}><Text style={{color:'white',fontSize:25}}>这是汽车品牌展示</Text></View>{/*ListView*/}<ListViewdataSource={this.state.dataSource}renderRow={this.renderRow}renderSectionHeader={this.renderSectionHeader}/></View>);}//返回每一组头部的内容renderSectionHeader(sectionData,sectionID){return(<View style={styles.sectionHeaderStyle}><Text style={{marginLeft:5,color:'red'}}>{sectionData}</Text></View>)}//返回每一行CellrenderRow(rowData){return(<TouchableOpacity activeOpacity={0.5}><View style={styles.rowStyle}><Image source={{uri:rowData.icon}} style={styles.rowImageStyle}/><Text style={{marginLeft:5}}>{rowData.name}</Text></View></TouchableOpacity>)}//发送网络请求的生命周期方法componentDidMount(){//数据我们需要先处理this.loadJson();}loadJson(){//拿到Jsonvar jsonData = Car.data;//定义数据源需要的变量var dataBlob = {},sectionIDs = [],rowIDs = [],//二维数组!!cars = [];//遍历for(var i=0;i<jsonData.length;i++){//1.组ID拿到sectionIDs.push(i);//2.dataBlobdataBlob[i] = jsonData[i].title;//3.取出这一组的所有的车cars = jsonData[i].cars;rowIDs[i] = [];for (var j=0;j<cars.length;j++){//i组的j行  那么这一行的ID 就是 jrowIDs[i].push(j);//每一行的内容放到dataBlob里面了!!dataBlob[i+':'+j] = cars[j];}}//更新状态机!!this.setState({dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)})}
}const styles = StyleSheet.create({container:{flex:1,},NavViewStyle:{height:64,backgroundColor:'orange',justifyContent:'center',alignItems:'center',},rowStyle: {padding:10,flexDirection:'row',alignItems:'center',//cell分割线borderBottomColor:'#e8e8e8',borderBottomWidth:0.5},rowImageStyle:{width:70,height:70},sectionHeaderStyle:{backgroundColor:'#e8e8e8',height:25,justifyContent:'center',}});

FlatList

V0.45之后，ListView组件被废除此组件已过期 - 请使用FlatList或SectionList代替。

高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。

如果需要分组/类/区（section），请使用 SectionList

ItemSeparatorComponent：分割线组件，
ListFooterComponent：结尾组件
ListHeaderComponent：头组件
data：列表数据
horizontal：设置为true则变为水平列表。
numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局
columnWrapperStyle：numColumns大于1时，设置每行的样式
getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。
refreshing：是否正在加载数据
onRefresh：设置此属性需要一个标准的 RefreshControl 控件，刷新数据
renderItem：渲染每个组件
onViewableItemsChanged：当一个新的Item渲染或者隐藏 的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item。
scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡。
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置。

import React, {Component} from 'react';
import {StyleSheet,View,FlatList,Text,Button,
} from 'react-native';var ITEM_HEIGHT = 100;export default class FlatListDemo extends Component {_flatList;_renderItem = (item) => {var txt = '第' + item.index + '个' + ' title=' + item.item.title;var bgColor = item.index % 2 == 0 ? 'red' : 'blue';return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>}_header = () => {return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>;}_footer = () => {return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>;}_separator = () => {return <View style={{height:2,backgroundColor:'yellow'}}/>;}render() {var data = [];for (var i = 0; i < 100; i++) {data.push({key: i, title: i + ''});}return (<View style={{flex:1}}><Button title='滚动到指定位置' onPress={()=>{this._flatList.scrollToEnd();{/*this._flatList.scrollToIndex({viewPosition:2,index:8});*/}{/*this._flatList.scrollToOffset({animated: true, offset: 2000});*/}}}/><View style={{flex:1}}><FlatListref={(flatList)=>this._flatList = flatList}ListHeaderComponent={this._header}ListFooterComponent={this._footer}ItemSeparatorComponent={this._separator}renderItem={this._renderItem}data={data}></FlatList></View></View>);}
}const styles = StyleSheet.create({txt: {textAlign: 'center',textAlignVertical: 'center',color: 'white',fontSize: 30,}
});

SectionList

SectionSeparatorComponent：组之间的分割控件
renderSectionHeader：组的头部
sections：列表的数据

import React, {Component} from 'react';
import {StyleSheet,View,Text,SectionList,
} from 'react-native';export default class SectionListDemo extends Component {_renderItem = (info) => {var txt = 'index:' + info.index + '     ' + info.item.title;var bgColor = info.index % 2 == 0 ? 'red' : 'blue';return <Textstyle={{height:100,textAlignVertical:'center',backgroundColor:bgColor,color:'white',fontSize:15}}>{txt}</Text>}_sectionComp = (info) => {var txt = 'key:' + info.section.key;return <Textstyle={{height:50,textAlign:'center',textAlignVertical:'center',backgroundColor:'black',color:'white',fontSize:30}}>{txt}</Text>}render() {var sections = [];for (var i = 0; i < 10; i++) {var datas = [];for (var j = 0; j < 10; j++) {datas.push({title: 'title:' + j});}sections.push({key: i, data: datas});}return (<View style={{flex:1}}><SectionListrenderSectionHeader={this._sectionComp}renderItem={this._renderItem}sections={sections}/></View>);}
}

React Native_React Native组件(ListViewFlatListSectionList)相关推荐

React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
native react 更新机制_React Native - 组件的生命周期详解（附：各阶段调用的方法）...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
React Native组件的结构和生命周期
React Native组件的结构和生命周期一.组件的结构 1.导入引用可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
React Native组件（四）TextInput组件解析
相关文章 React Native探索系列 React Native组件系列 1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文 ...
React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
从0到1，一步步开发React的loading组件，并发布到npm上
没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西.甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应该挺难的,就小声说了没有,然后就让我回去 ...
在Flutter中嵌入Native组件的正确姿势
引言在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
Java 接受reactjs数据_[Java教程]react.js 父子组件数据绑定实时通讯
[Java教程]react.js 父子组件数据绑定实时通讯 0 2017-09-23 17:00:14 import React,{Component} from 'react'import Reac ...

React Native_React Native组件(ListViewFlatListSectionList)

ListView

FlatList

SectionList

React Native_React Native组件(ListViewFlatListSectionList)相关推荐

最新文章

热门文章