自己做項目中的重點知識蝗拿，不是教程攻走，如果學(xué)習(xí)的話可以拿來參考尉辑。源代碼[地址][3]
[3]: https://github.com/BaiPeiHe/react-native
簡介
一個列表組件殿如，在不同的布局或試圖中顯示一組數(shù)據(jù)項柴墩。
官網(wǎng)地址
基本
實現(xiàn)簡單的功能君仆，將數(shù)據(jù)渲染到視圖上翩概。
import React,{Component} from 'react';
import {
View,
Text,
Image,
ListView,
StyleSheet,
TouchableOpacity,
}from 'react-native';
import NavigationBar from './NavigationBar'
// 本地數(shù)據(jù)
var data={
"result":[
{
"email":"email00",
"fullName":"張三00"
},
{
"email":"email01",
"fullName":"張三01"
},
]
};
export default class ListViewTest extends Component{
constructor(props){
super(props);
// 定義數(shù)據(jù)源
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
// 指定數(shù)據(jù)源
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)}
// 調(diào)用渲染分割線方法
renderSeparator={()=>this.renderSeparator()}
></ListView>
</View>
)
}
const styles = StyleSheet.create({
// 分割線的樣式
line:{
height:1,
backgroundColor:'black'
},
});
腳視圖
在腳視圖上渲染一張圖片。
注意：<Image/>標簽在渲染網(wǎng)絡(luò)圖片時返咱，要指定寬钥庇、高。
// 渲染腳視圖
renderFooter(){
// <Image/>網(wǎng)絡(luò)圖片要指定寬咖摹、高评姨。
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()}
// 調(diào)用渲染腳視圖方法
renderFooter={()=>this.renderFooter()}
></ListView>
</View>
)
}
點擊方法
點擊每一行，顯示當前的標題萤晴。
顯示信息使用到了組件：react-native-easy-toast
安裝組件：npm i react-native-easy-toast --save
// 導(dǎo)入頭文件
// 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>
)
}
下拉刷新
實現(xiàn)下拉刷新功能
使用 RefreshControl
// 導(dǎo)入頭文件
RefreshControl,
// 添加 state 參數(shù)
this.state={
dataSource:ds.cloneWithRows(data.result),
isLoading:true,
}
this.onLoad();
// 刷新觸發(fā)方法
onLoad(){
// 延時兩秒
setTimeout(()=>{
// 結(jié)束刷新
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}
// 刷新時觸發(fā)的方法
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>
}
// 加載數(shù)據(jù)
onLoad(){
// 延時兩秒
setTimeout(()=>{
// 設(shè)置狀態(tài)嗦枢，這時就不會顯示刷新了
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'
},
});
