自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][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
{item.fullName}
{item.email}
}
// 渲染界面
render(){
return(
this.renderRow(item)}
>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white'
},
text:{
fontSize:18
},
tips:{
fontSize:18
},
row:{
height:50
},
});
分割线
// 渲染分割线
renderSeparator(sectionID,rowID,adjacentRowHightlighted){
return
this.renderRow(item)}
// 调用渲染分割线方法
renderSeparator={()=>this.renderSeparator()}
>
)
}
const styles = StyleSheet.create({
// 分割线的样式
line:{
height:1,
backgroundColor:'black'
},
});
脚视图
在脚视图上渲染一张图片。
注意：
// 渲染脚视图
renderFooter(){
//
this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
// 调用渲染脚视图方法
renderFooter={()=>this.renderFooter()}
>
)
}
点击方法
点击每一行，显示当前的标题。
显示信息使用到了组件：react-native-easy-toast
安装组件：npm i react-native-easy-toast --save
// 导入头文件
// DURATION 是常量，表示显示的时长
import Toast,{DURATION} from 'react-native-easy-toast'
renderRow(item){
return
{
this.toast.show('你单击了：'+item.fullName,DURATION.LENGTH_LONG);
}}
>
{item.fullName}
{item.email}
}
render(){
return(
this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
renderFooter={()=>this.renderFooter()}
>
// 渲染 Toast，并赋值给 this.toast
{this.toast=toast}}/>
)
}
下拉刷新
实现下拉刷新功能
使用 RefreshControl
// 导入头文件
RefreshControl,
// 添加 state 参数
this.state={
dataSource:ds.cloneWithRows(data.result),
isLoading:true,
}
this.onLoad();
// 刷新触发方法
onLoad(){
// 延时两秒
setTimeout(()=>{
// 结束刷新
this.setState({
isLoading:false
})
},2000);
}
render(){
return(
this.renderRow(item)}
renderSeparator={()=>this.renderSeparator()}
renderFooter={()=>this.renderFooter()}
// 下拉刷新
refreshControl={this.onLoad()}
/>}
>
{this.toast=toast}}/>
)
}
完整代码
/**
* 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
{
this.toast.show('你单击了：'+item.fullName,DURATION.LENGTH_LONG);
}}
>
{item.fullName}
{item.email}
}
// 渲染分割线
renderSeparator(sectionID,rowID,adjacentRowHightlighted){
return
this.renderRow(item)}
// 分割线
renderSeparator={()=>this.renderSeparator()}
// 脚视图
renderFooter={()=>this.renderFooter()}
//
refreshControl={this.onLoad()}
/>}
>
{this.toast=toast}}/>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white'
},
text:{
fontSize:18
},
tips:{
fontSize:18
},
row:{
height:50
},
line:{
height:1,
backgroundColor:'black'
},
});