测试完成效果内容
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