1、新建ListViewTest.js文件；
- 导入
ListView
import React, {Component, PropTypes} from 'react';
import {
StyleSheet,
Text,
ListView,
Image,
View
} from 'react-native';
- 在构造方法中创建
datasource数据源，用相应的clone方法设置datasource的初始值
constructor(props) {
super(props);
// 创建datasource数据源
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
// 用相应的clone方法设置datasource的初始值
dataSource: ds.cloneWithRows(data.result),//data.result为模拟的数据或服务端得到的数据
isLoading: true
}
this.onLoad()
}
模拟数据
var data = {
"result": [
{
"fullName": "张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "李四",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "王五",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "赵六",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "冯七",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小明",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小长",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小红",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小明",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小丽",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
}
]
};
- 渲染
ListView
render() {
return (
this.renderRow(item)}//制定listView的显示效果
//行与行之间的分割线，用renderSeparator实现
renderSeparator={(sectionID, rowID, adjacentRowHighlighted) =>
this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)
}
//页脚，底部的图片和文字，提示性，图片和文字都可以
renderFooter={() => this.renderFooter()}
// 下拉刷新，要用到RefreshControl，需要导入
refreshControl={
this.onLoad()}/>
}
/>
{
this.toast = toast
}}
/>
);
}
a、制定listView的显示效果
renderRow(item) {
return
{//点击一行显示姓名，要用到TouchableOpacity组件,需要导入
this.toast.show('你单击了：' + item.fullName, DURATION.LENGTH_LONG)
}}>
姓名：{item.fullName}
邮箱：{item.email}
time：{item.time}
}
其中TouchableOpacity 组件是点击该行的时候弹出Toast,需要创建一下组件：
{
this.toast = toast
}}
/>
b、行与行之间的分割线，用renderSeparator实现
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return c、页脚，底部的图片和文字，提示性，图片和文字都可以
renderFooter() {
// return
我是有底线的
}
在这要注意，本地的图片不需要设置宽高就可以，但是网络上的图片需要设置宽高，不然图片无法显示
d、下拉刷新，要用到RefreshControl，需要导入
// 刷新的状态，时间2s
onLoad() {
setTimeout(() => {
this.setState({
isLoading: false
})
}, 2000)
}
2、外部调用
- 导入
import ListView from "./ListViewTest"
- 直接使用
运行结果：
运行截图
列表底部有文字的截图
附带
ListView.js源码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component, PropTypes} from 'react';
import {
StyleSheet,
Text,
ListView,
Image,
TouchableOpacity,
RefreshControl,
View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import NavigationBar from "./js/common/NavigationBar";
import Toast, {DURATION} from 'react-native-easy-toast'
var data = {
"result": [
{
"fullName": "张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "李四",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "王五",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "赵六",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "冯七",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小明",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小长",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小红",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小明",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "小丽",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三张三",
"email": "[email protected]",
"time": "2018-10-10"
},
{
"fullName": "张三张三",
"email": "[email protected]",
"time": "2018-10-10"
}
]
};
export default class ListViewTest extends Component {
constructor(props) {
super(props);
// 创建datasource数据源
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
// 用相应的clone方法设置datasource的初始值
dataSource: ds.cloneWithRows(data.result),//data.result为模拟的数据或服务端得到的数据
isLoading: true
}
this.onLoad()
}
renderRow(item) {
return
{//点击一行显示姓名，要用到TouchableOpacity组件
this.toast.show('你单击了：' + item.fullName, DURATION.LENGTH_LONG)
}}>
姓名：{item.fullName}
邮箱：{item.email}
time：{item.time}
}
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return
我是有底线的
}
// 刷新的状态，时间2s
onLoad() {
setTimeout(() => {
this.setState({
isLoading: false
})
}, 2000)
}
// 渲染listView
render() {
return (
this.renderRow(item)}//制定listView的显示效果
//行与行之间的分割线，用renderSeparator实现
renderSeparator={(sectionID, rowID, adjacentRowHighlighted) =>
this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)
}
//页脚，底部的图片和文字，提示性，图片和文字都可以
renderFooter={() => this.renderFooter()}
// 下拉刷新，要用到RefreshControl，需要导入
refreshControl={
this.onLoad()}/>
}
/>
{
this.toast = toast
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
text1: {
fontSize: 15,
marginLeft: 10,
marginTop: 7
},
text2: {
fontSize: 15,
marginLeft: 10,
marginTop: 7
},
text3: {
fontSize: 14,
marginLeft: 250,
marginTop: -16,
},
icon: {
height: 22,
width: 22,
},
row: {
height: 60,
},
line: {
height: 1,
backgroundColor: '#F0F0F0'
},
tip: {
fontSize: 10
}
});