/**
* ListView
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity
} from 'react-native';
var Dimensions=require('Dimensions')
var datas=require('./1.json');
export default class ListViewDemo extends Component<{}> {
constructor(props) {
super(props)
//1.設置數據源 固定寫法
var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
//2.設置返回的數據 固定寫法
this.state={
dataSource:ds.cloneWithRows(datas)
}
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}>
</ListView>
</View>
);
}
//設置每行的item
renderRow(rowData,sectionID,rowID,highlightRow){
return(
<TouchableOpacity activeOpacity={0.6} onPress={()=>{
alert('點擊了第'+rowID+"行")
}}>
<View style={styles.rowViewStyle}>
{/*左邊的Image*/}
<Image source={{uri:rowData.instrument}} style={styles.leftViewStyle}/>
{/*右邊的View*/}
<View style={styles.rightViewStyle}>
<Text style={styles.topTextStyle}>
{rowData.firstName}
</Text>
<Text style={styles.bottomTextStyle}>
{rowData.money}
</Text>
</View>
</View>
</TouchableOpacity>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1, //設置全為1說明它占一份,
backgroundColor:'white'
},
rowViewStyle:{
//整個View的布局
flexDirection:'row',
marginTop:10,
backgroundColor:'white',
alignItems:'center',
borderBottomWidth:0.5,
borderColor:'#e8e8e8',
padding:10
},
leftViewStyle:{
width:70,
height:70
},
rightViewStyle:{
marginLeft:10,
justifyContent:'center'
},
topTextStyle:{
color:'red',
fontSize:18
},
bottomTextStyle:{
marginTop:10,
color:'green'
}
})
Rn ListView實踐
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 問題描述 頁面1 push 到頁面2 頁面2 發送監聽 刷新頁面1 的ListView,不返回頁面1 手動返回頁...
- 教程說明如何初始化一個redux Store如何使用action+reducer來管理state如何在react-...
- 實現如圖所示滾動視圖,外層 包裹,里面使用ListView設置數據源。 TopView組件,ScrollView的...