RN学习-ListView列表

以下是发现模块的代码Discover.js

/**
 * @providesModule Discover
 */
import React, {Component} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
}from 'react-native'
// 网络请求
var discoverData = require('../Res/discoverData.json');

// 导入自定义分组ListView
import CommonGroupListViewHeader from 'CommonGroupListViewHeader'
import Common from 'Common'
import CommonNavigationBar from 'CommonNavigationBar'
import DiscoverScrollCell from  'DiscoverScrollCell'
import DiscoverVideoCell from  'DiscoverVideoCell'
import VideoView from 'VideoView'

// 3.自定义 程序入口组件([[UIView alloc] init])
export default class Discover extends Component {

    constructor(props){
        super(props);
        var groups = [];
        // 加载第0组
        this.setupGroup0(groups);
        // 加载第1组
        this.setupGroup1(groups);
        // 加载第2组
        this.setupGroup2(groups)
        this.state = {
            groups:groups //创建数据源，但还没有给它传递数据，使用state保存数据源，因为数据源的数据改变的时候，需要刷新界面
        }
    }

    setupGroup0(groups){
        var section = discoverData[0];
        var sectionData = section.sData; // sData rData 是json数据的数据字段
        var rowDatas = section.rData;

        var allRowData = [];
        rowDatas.forEach((rowData,i)=>{
            var item = new CommonGroupListViewHeader.CommonArrowRowItem('',rowData.name,rowData.disc);
            allRowData.push(item);
        });

        var group0 = new CommonGroupListViewHeader.CommonGroupItem(allRowData,sectionData.height);
        groups.push(group0);
    }

    setupGroup1(groups){

        var section = discoverData[1];
        var sectionData = section.sData;
        var rowDatas = section.rData;

        var item0 = new CommonGroupListViewHeader.CommonArrowRowItem('',sectionData.name,sectionData.disc);

        var item1 = new CommonGroupListViewHeader.CommonRowItem();
        item1.customData = rowDatas[0];
        item1.customCellType = DiscoverScrollCell;

        var group1 = new CommonGroupListViewHeader.CommonGroupItem([item0,item1],sectionData.height);
        groups.push(group1);
    }


    setupGroup2(groups){

        var section = discoverData[2];
        var sectionData = section.sData;
        var rowDatas = section.rData;
        var allRowData = [];
        var item0 = new CommonGroupListViewHeader.CommonArrowRowItem('',sectionData.name);
        allRowData.push(item0); // 给allRowData数据源加入头部数据

        rowDatas.forEach((rowData,i)=>{  // 遍历rowDatas组数据得出行数据，加入总数据rowDatas中
            var item = new CommonGroupListViewHeader.CommonRowItem();
            item.customData = rowData;
            item.customCellType = DiscoverVideoCell;
            item.route = {
                component:VideoView,
                videoUri:rowData.video
            }
            allRowData.push(item);  //给allRowData数据源加入每个cell数据
        });

        var group1 = new CommonGroupListViewHeader.CommonGroupItem(allRowData,sectionData.height);
        groups.push(group1);
    }
    render(){

        return (
            <View>
                <CommonNavigationBar
                    titleView={this.renderTitleView()}
                />
                <CommonGroupListViewHeader.CommonGroupListView groups={this.state.groups}
                                                               groupListViewStyle={{backgroundColor:Common.bgColor}}
                                                               navigator={this.props.navigator}
                                                               titleStyle={{fontSize:18}}
                                                               subTitleStyle={{color:'rgb(80,80,80)'}}

                />
            </View>
        )
    }

    renderTitleView(){
        return (
            <Image source={{uri:'discover'}} style={{width:54,height:37}}/>
        )
    }
}

// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

模块当做一个对象导出知识点

/**
 * @providesModule CommonGroupListViewHeader
 */

import CommonGroupItem from  'CommonGroupItem'
import CommonRowItem from  'CommonRowItem'
import CommonSwitchRowItem from 'CommonSwitchRowItem'
import CommonArrowRowItem from  'CommonArrowRowItem'
import CommonGroupListView from 'CommonGroupListView'

// 把当前模块当做一个对象导出
module.exports = {
    CommonGroupItem,
    CommonRowItem,
    CommonSwitchRowItem,
    CommonArrowRowItem,
    CommonGroupListView
}

1.module.exports把里面所有内容当做一个整体，含有组头、该组所有cell类型，即CommonGroupListViewHeader拥有module.exports里面的五项内容。
比如调用CommonGroupItem的方法（给该组所有视图包括头部，尾部，cell赋值）：
var group1 = new CommonGroupListViewHeader.CommonGroupItem(allRowData,sectionData.height);
2.module.exports里面每一个都要声明，比如CommonGroupItem.js有代码如下
module.exports = CommonGroupItem; // 在JS中,每个文件相当于一个模块

ListView知识点

使用

1.创建数据源，但还没有给它传递数据
使用state保存数据源，因为数据源的数据改变的时候，需要刷新界面
方法：
ListView.DataSource:获取ListViewDataSource构造方法
ListViewDataSource构造方法:决定ListView怎么去处理数据，需要传入一个对象
getRowData(dataBlob, sectionID, rowID)：怎么获取行数据
getSectionHeaderData(dataBlob, sectionID)：怎么获取每一组头部数据
rowHasChanged(prevRowData, nextRowData)：决定什么情况行数据才发生改变，当行数据发生改变，就会绘制下一行cell
sectionHeaderHasChanged(prevSectionData, nextSectionData)：决定什么情况头部数据才发生改变，当行数据发生改变，就会绘制下一行cell
初始化ListViewDataSource的时候，如果不需要修改提取数据的方式，只需要实现rowHasChanged，告诉什么时候刷新下一行数据

constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 }

2.给数据源设置数据

constructor(props) {
  super(props);
// 初始化数据源
        var ds = new ListView.DataSource({
            rowHasChanged:(r1,r2)=>r1!=r2,
            sectionHeaderHasChanged:(s1,s2)=> s1 != s2
        });

// 设置数据 分组使用：cloneWithRowsAndSections 不分组使用：cloneWithRows
        ds = ds.cloneWithRowsAndSections(sectionData)
        this.state = {
            ds:ds
        }

分组样式：只要数据结构如下类型，就会产生分组样式

{ sectionID_1: { rowID_1: rowData1, ... }, ... }
或者：
{ sectionID_1: [ rowData1, rowData2, ... ], ... }
或者：
[ [ rowData1, rowData2, ... ], ... ]

如例子：自定义分组ListView：CommonGroupListViewHeader.js

/**
 * @providesModule CommonGroupListView
 */
import React, {Component,PropTypes} from 'react'

import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView

}from 'react-native'

import CommonRowCell from 'CommonRowCell'

export default class CommonGroupListView extends Component {

    static propTypes = {
        groups:PropTypes.array,
        groupListViewStyle:PropTypes.oneOfType([PropTypes.number,PropTypes.object]),
        imageStyle:PropTypes.oneOfType([PropTypes.number,PropTypes.object]),
        titleStyle:PropTypes.oneOfType([PropTypes.number,PropTypes.object]),
        subTitleStyle:PropTypes.oneOfType([PropTypes.number,PropTypes.object]),
        navigator:PropTypes.object,

        renderHeader:PropTypes.func,
        renderFooter:PropTypes.func,
    }

    constructor(props){
        super(props);

        // 初始化数据源
        var ds = new ListView.DataSource({
            rowHasChanged:(r1,r2)=>r1!=r2,
            sectionHeaderHasChanged:(s1,s2)=> s1 != s2
        });

        // 处理组模型数组
        var groups = this.props.groups;

        var sectionData = [];

        groups.forEach((groupItem,i)=>{
            sectionData.push(groupItem.rowsData);
        })

        // 设置数据 分组使用：cloneWithRowsAndSections 不分组使用：cloneWithRows
        ds = ds.cloneWithRowsAndSections(sectionData)
        this.state = {
            ds:ds
        }
    }

    render(){

        return (
            <ListView dataSource={this.state.ds}
                      renderRow={this._renderRow.bind(this)}
                      renderSectionHeader={this._renderSectionHeader.bind(this)}
                      style={this.props.groupListViewStyle}
                      renderHeader={this.props.renderHeader}
                      renderFooter={this.props.renderFooter}
            />
        )

    }

    _renderRow(rowData,sectioniD,rowID){

        return (
                rowData.customData?<rowData.customCellType rowData={rowData} {...this.props}/>:<CommonRowCell rowData={rowData} {...this.props}/>
            )
    }
    _renderSectionHeader(sectionData, sectionID){
        // 获取组模型就好了

        var groupItem = this.props.groups[sectionID];

        return (
            <View style={{height:groupItem.sectionHeight}}></View>
        )
    }
}

var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

其他
头部，尾部

 _renderHeader() {
        return (
            <View>
                <Text>头部视图</Text>
            </View>
        )
    }

_renderFooter() {
        return (
            <View>
                <Text>尾部视图</Text>
            </View>
        )
    }

点击高亮

_renderRow(rowData, sectionID, rowID, highlightRow) {

        return (
            <TouchableOpacity onPress={()=>{
                highlightRow(sectionID,rowID)
            }}>
                <View>
                    <Text>{rowData}</Text>
                </View>
            </TouchableOpacity>

        );
    }

分割线

_renderSeparator(sectionID, rowID, adjacentRowHighlighted)  {
        return (
            <View style={{height:1,backgroundColor:'black'}}></View>
        )
    }

导航栏跳转知识点

导航栏跳转以及数据传递 Discover.js中

        rowDatas.forEach((rowData,i)=>{
            var item = new CommonGroupListViewHeader.CommonRowItem();
            item.customData = rowData;
            item.customCellType = DiscoverVideoCell;
            item.route = { //变量赋值传递数据用于跳转
                component:VideoView,  // 定义变量说明跳转的视图
                videoUri:rowData.video // 定义变量说明参数数据  video是json字段
            }
            allRowData.push(item);
        });

CommonRowCell.js中拥有rowData每一行的数据，拿到rowData中的route就可以push

if(this.props.rowData.route){  // 如果this.props.rowData.route有值，即外界有传递数据
             var route = this.props.rowData.route;
             route.navigator = this.props.navigator;
             this.props.navigator.push(route);
 }

VideoView.js

取数据：this.props.videoUri

http://reactnative.cn/docs/0.49/navigation.html#content

所以，相当于

this.props.navigator.push({
      component:VideoView,  
       videoUri:rowData.video
  });

附上CommonRowCell.js
样式：

/**
 * @providesModule CommonRowCell
 */
import React, {Component,PropTypes} from 'react'

// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    PixelRatio,
    Switch

}from 'react-native'

import Common from 'Common'

export default class CommonRowCell extends Component {

    static propTypes = {
        rowData:PropTypes.object
    }

    constructor(props){
        super(props);

        this.state = {
            isOn:false
        }

        // 判断下当前是否是开关,如果是开关,就不能设置子标题
        var className = this.props.rowData.constructor.name;

        if (className == 'CommonSwitchRowItem') {

            // 判断子标题
            if (this.props.rowData.subTitle){
                throw '开关模型,不允许设置子标题';
            }

        }
    }

    render(){
        return (
            <TouchableOpacity style={styles.cellStyle}
                              onPress={()=>{

                                  if(this.props.rowData.clickCell){
                                      this.props.rowData.clickCell();
                                  }

                                  if(this.props.rowData.route){
                                      var route = this.props.rowData.route;
                                      route.navigator = this.props.navigator;
                                      this.props.navigator.push(route);
                                  }
                              }}
                              disabled={this.props.rowData.disabled}
            >
                {/*图片*/}
                {this.props.rowData.image?<Image source={{uri:this.props.rowData.image}} style={[styles.imageStyle,this.props.imageStyle]}/>:null}
                {/*标题*/}
                <Text style={[styles.titleStyle,this.props.titleStyle]}>{this.props.rowData.title}</Text>
                {/*子标题 switch*/}
                <Text style={[styles.subTitleStyle,this.props.subTitleStyle]}>{this.props.rowData.subTitle}</Text>
                {this._renderAccessoryView()}
            </TouchableOpacity>
        )
    }

    // 渲染右边辅助视图
    _renderAccessoryView(){
        // 获取当前对象的构造方法 => 类名
        var className = this.props.rowData.constructor.name;
        // 判断当前模型属于哪个类
        if (className == 'CommonArrowRowItem'){ {/*箭头*/}
            return (
                <Image source={{uri:'icon_shike_arrow'}} style={styles.arrowStyle}/>
            )
        } else if (className == 'CommonSwitchRowItem'){ {/*开关*/}
            return (
                <Switch style={styles.switchStyle}
                        onValueChange={(newValue)=>{
                            this.setState({
                                isOn:newValue
                            })
                        }}
                        value={this.state.isOn}
                />
            )
        }

        {/*什么都不显示*/}
    }
}

var styles = StyleSheet.create({
    cellStyle:{
        flexDirection:'row',
        alignItems:'center',
        width:Common.screenW,
        height:44,
        borderBottomColor:'#e5e5e5',
        borderBottomWidth:1 / PixelRatio.get(),
        backgroundColor:'white'
    },
    imageStyle:{
        width:25,
        height:25,
        marginLeft:5
    },
    arrowStyle:{
        width:7,
        height:12,
        position:'absolute',
        right:5
    },
    titleStyle:{
        marginLeft:5
    },
    subTitleStyle:{
        marginLeft:5
    },
    switchStyle:{
        position:'absolute',
        right:5
    },
})

最后编辑于：2017.12.11 05:08:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,293评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,604评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,958评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,729评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,719评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,630评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,000评论 3赞 397
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,665评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,909评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,646评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,726评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,400评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,986评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,959评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,996评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,481评论 2赞 342

RN学习-ListView列表

以下是发现模块的代码Discover.js

模块当做一个对象导出知识点

ListView知识点

导航栏跳转知识点

推荐阅读更多精彩内容