1.6 ListView
2017-06-21 本文已影响0人
倪灏
自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][3]
[3]: https://github.com/BaiPeiHe/react-native
简介
一个列表组件，在不同的布局或试图中显示一组数据项。
官网地址
基本
实现简单的功能，将数据渲染到视图上。
import React,{Component} from 'react';
import {
View,
Text,
Image,
ListView,
StyleSheet,
TouchableOpacity,
}from 'react-native';
import NavigationBar from './NavigationBar'
// 本地数据
var data={
"result":[
{
"email":"email00",
"fullName":"张三00"
},
{
"email":"email01",
"fullName":"张三01"
},
]
};
export default class ListViewTest extends Component{
constructor(props){
super(props);
// 定义数据源
const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
this.state={
dataSource:ds.cloneWithRows(data.result),
}
}
// 渲染每一个 Cell
renderRow(item){
return <View style={styles.row}>
<Text style={styles.tips}>{item.fullName}</Text>
<Text style={styles.tips}>{item.email}</Text>
</View>
}
// 渲染界面
render(){
return(
<View style={styles.container}>
<NavigationBar
title={'ListViewTest'}
/>
<ListView
// 指定数据源
dataSource={this.state.dataSource}
// 渲染 Cell
renderRow={(item)=>this.renderRow(item)}
></ListView>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white'
},
text:{
fontSize:18
},
tips:{
fontSize:18
},
row:{
height:50
},
});
分割线
// 渲染分割线
renderSeparator(sectionID,rowID,adjacentRowHightlighted){
return <View key={rowID} style={styles.line}></View>
}
render(){
return(
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={(item)=>this.renderRow(item)}
// 调用渲染分割线方法
renderSeparator={()=>this.renderSeparator()}
></ListView>
</View>
)
}
const styles = StyleSheet.create({
// 分割线的样式
line:{
height:1,
backgroundColor:'black'
},
});
脚视图
在脚视图上渲染一张图片。
注意：<Image/>标签在渲染网络图片时，要指定宽、高。
// 渲染脚视图
renderFooter(){
// <Image/>网络图片要指定宽、高。
return <Image style={{width:400,height:100}} source={{url:'[图片链接][2]'}}></Image>
}
render(){
return(
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={(item)=>this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
// 调用渲染脚视图方法
renderFooter={()=>this.renderFooter()}
></ListView>
</View>
)
}
点击方法
点击每一行，显示当前的标题。
显示信息使用到了组件：react-native-easy-toast
安装组件：npm i react-native-easy-toast --save
// 导入头文件
// DURATION 是常量，表示显示的时长
import Toast,{DURATION} from 'react-native-easy-toast'
renderRow(item){
return <View style={styles.row}>
<TouchableOpacity
// 点击方法
onPress={()=>{
this.toast.show('你单击了：'+item.fullName,DURATION.LENGTH_LONG);
}}
>
<Text style={styles.tips}>{item.fullName}</Text>
<Text style={styles.tips}>{item.email}</Text>
</TouchableOpacity>
</View>
}
render(){
return(
<View style={styles.container}>
<NavigationBar
title={'ListViewTest'}
/>
<ListView
dataSource={this.state.dataSource}
renderRow={(item)=>this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
renderFooter={()=>this.renderFooter()}
></ListView>
// 渲染 Toast，并赋值给 this.toast
<Toast ref={toast=>{this.toast=toast}}/>
</View>
)
}
下拉刷新
实现下拉刷新功能
使用 RefreshControl
// 导入头文件
RefreshControl,
// 添加 state 参数
this.state={
dataSource:ds.cloneWithRows(data.result),
isLoading:true,
}
this.onLoad();
// 刷新触发方法
onLoad(){
// 延时两秒
setTimeout(()=>{
// 结束刷新
this.setState({
isLoading:false
})
},2000);
}
render(){
return(
<View style={styles.container}>
<NavigationBar
title={'ListViewTest'}
/>
<ListView
dataSource={this.state.dataSource}
renderRow={(item)=>this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
renderFooter={()=>this.renderFooter()}
// 下拉刷新
refreshControl={<RefreshControl
// 是否刷新
refreshing={this.state.isLoading}
// 刷新时触发的方法
onRefresh={()=>this.onLoad()}
/>}
></ListView>
<Toast ref={toast=>{this.toast=toast}}/>
</View>
)
}
完整代码
/**
* Created by baihe on 2017/4/13.
*/
import React,{Component} from 'react';
import {
View,
Text,
Image,
ListView,
StyleSheet,
RefreshControl,
TouchableOpacity,
}from 'react-native';
import NavigationBar from './NavigationBar'
// DURATION 是常量，表示显示的时长
import Toast,{DURATION} from 'react-native-easy-toast'
var data={
"result":[
{
"email":"email00",
"fullName":"张三00"
},
{
"email":"email01",
"fullName":"张三01"
},
{
"email":"email02",
"fullName":"张三02"
},
{
"email":"email03",
"fullName":"张三03"
},
{
"email":"email04",
"fullName":"张三04"
},
{
"email":"email05",
"fullName":"张三05"
},
{
"email":"email06",
"fullName":"张三06"
},
{
"email":"email07",
"fullName":"张三07"
},
{
"email":"email08",
"fullName":"张三08"
},
{
"email":"email09",
"fullName":"张三09"
},
{
"email":"email10",
"fullName":"张三10"
},
{
"email":"email11",
"fullName":"张三11"
},
]
};
export default class ListViewTest extends Component{
constructor(props){
super(props);
const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
this.state={
dataSource:ds.cloneWithRows(data.result),
isLoading:true,
}
this.onLoad();
}
renderRow(item){
return <View style={styles.row}>
<TouchableOpacity
onPress={()=>{
this.toast.show('你单击了：'+item.fullName,DURATION.LENGTH_LONG);
}}
>
<Text style={styles.tips}>{item.fullName}</Text>
<Text style={styles.tips}>{item.email}</Text>
</TouchableOpacity>
</View>
}
// 渲染分割线
renderSeparator(sectionID,rowID,adjacentRowHightlighted){
return <View key={rowID} style={styles.line}></View>
}
renderFooter(){
return <Image style={{width:400,height:100}} source={{url:'https://images.gr-assets.com/hostedimages/1406479536ra/10555627.gif'}}></Image>
}
// 加载数据
onLoad(){
// 延时两秒
setTimeout(()=>{
// 设置状态，这时就不会显示刷新了
this.setState({
isLoading:false
})
},2000);
}
render(){
return(
<View style={styles.container}>
<NavigationBar
title={'ListViewTest'}
/>
<ListView
dataSource={this.state.dataSource}
// 每个 Cell
renderRow={(item)=>this.renderRow(item)}
// 分割线
renderSeparator={()=>this.renderSeparator()}
// 脚视图
renderFooter={()=>this.renderFooter()}
//
refreshControl={<RefreshControl
refreshing={this.state.isLoading}
onRefresh={()=>this.onLoad()}
/>}
></ListView>
<Toast ref={toast=>{this.toast=toast}}/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white'
},
text:{
fontSize:18
},
tips:{
fontSize:18
},
row:{
height:50
},
line:{
height:1,
backgroundColor:'black'
},
});
