自己做項目中的重點知識，不是教程，如果學習的話可以拿來參考。源代碼[地址][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'
},
});
