react native listview组件 探索记录

测试完成效果内容

1、动态改变数据源问题，通过利用state中声明属性 dataSource，在方法中通过 this.setState({dataSource : 将要设置的值})  ，将值设为 this.state.dsData.cloneWithRows(setData) ,通过方法获取的形式

由此可以看出 state中声明属性的重要性，且setState后会自动刷新页面

2、点击每一行高亮问题 ，引用TouchableOpacity控件
3、点击事件响应问题   ，每个Item中设置事件响应，并可以传递数据

下一节解决下面问题

//每个item 自定义布局，并和数据绑定问题
//头部  尾部自定义问题
//刷新 和 下拉加载 问题

//rowid调试debug可以显示值，但打印显示object 的情况需要解决

import React,{ Component } from 'react';
import {
Appregistry,
StyleSheet,
View,
ListView,
PixelRatio,
Text,
TouchableOpacity,
Image

} from 'react-native';


var THUMB_URLS = [  
  require('./imgs/ic_launcher.png'),  
];


  class EligenListView extends Component{
constructor(props)
{
super(props);
//为变量赋初始值
// static  defaultProos = {


// dataSource : [],
// };

var ds = new ListView.DataSource(


{rowHasChanged:(r1,r2) => {return r1 != r2;}


});
              //声明变量
this.state = {
//声明属性，并赋默认值
//
 dsData: ds,
// dataSource: ds.cloneWithRows(['row1','row2','row1','row2','row2','row1','row2','row2','row1','row2','row2','row1','row2','row2','row1','row2','row2','row1','row2']),
dataSource: ds.cloneWithRows(this._genRows()),

           
};


}


  _genRows() {  
    var dataBlob = [];  
    for (var ii = 0; ii < 15;ii++) {  
      dataBlob.push('单元格 ' + ii);  
    }  
    return dataBlob;  
  } 


   _dynamicGenRows() {  
    var dataBlob = [];  
    for (var ii = 0; ii < 15;ii++) {  
      dataBlob.push('单元格动态值 ' + ii);  
    }  
    return dataBlob;  
  } 


  // _setStateDataSource(rowData,sectionID,rowID)
  // {
  // var setData = this._dynamicGenRows();
  // this.setState({ dataSource : this.state.dsData.cloneWithRows(setData)});
  // }
   _setStateDataSource()
  {
  var setData = this._dynamicGenRows();
  this.setState({ dataSource : this.state.dsData.cloneWithRows(setData)});
  }


  _itemPress(rowData,sectionID,rowID)
   {
        alert("itemPress : " + rowData + " rowID : " + rowID );
         // this.setStateDataSource();
          this._setStateDataSource();

   }
 _renderRow(rowData,sectionID, rowID)
  {  
    var imgSource = THUMB_URLS[0];  
    return (  
        <TouchableOpacity >  
          <View>  
            <View style={styles.rowsingle}>  
              <Image style={styles.thumbsingle} source={imgSource} />  
              <Text style={{flex:1,fontSize:16,color:'blue'}}  onPress={this._itemPress.bind(this,rowData,rowID)}>  
                {rowData + '我是测试行号哦~'}  
              </Text>  
            </View>  
          </View>  
        </TouchableOpacity>  
    ); 
   };




 
render(){


      return(
       <ListView 
              dataSource = {this.state.dataSource}
             renderRow={this._renderRow.bind(this)}
                    onEndReached={this.onEndReached.bind(this)}
                    onEndReachedThreshold={1}
                    pageSize={15}
                    >
        </ListView>
      );
};
//函数自带post
renderRow(post)
{
alert('post ' + post);
return ( <Text >{post}</Text>);
};
//函数自带event
onEndReached(event)
{
alert('onEndReached ');


}


};






var styles = StyleSheet.create(
{
  container:
  {
  flex:1,
  },




rowsingle: {  
    flexDirection: 'row',  
    justifyContent: 'center',  
    padding: 10,  
    backgroundColor: '#F6F6F6',  
  },  
  thumbsingle: {  
    width: 50,  
    height: 50,  
  },  


//如果对list进行设置 wrap 换行 请 justifyContent为 space-around 的时候则是容器均分，类似gridview


    list: {  
    marginTop:5,  
    justifyContent: 'space-around',  
    flexDirection: 'row',  
    flexWrap: 'wrap'  
  },  
  row: {  
    justifyContent: 'center',  
    padding: 5,  
    margin: 3,  
    width: 85,  
    height: 85,  
    backgroundColor: '#F6F6F6',  
    alignItems: 'center',  
    borderWidth: 1,  
    borderRadius: 5,  
    borderColor: '#CCC'  
  },  
  thumb: {  
    width: 45,  
    height: 45  
  },  
  text: {  
    flex: 1,  
    marginTop: 5,  
    fontWeight: 'bold'  
  },


});


// Appregistry.registerComponent('eligenListView',() => eligenListView);
export default EligenListView;







//动态赋值
// _setDataSource(ds)
// {
// this.setState({datasource:ds});
// };
// 
   // contentContainerStyle = {styles.list}


//数据源    dataSource = {this.state.dataSource}
//函数 

参考链接

http://blog.csdn.net/developer_jiangqq/article/details/50635659