[React-Native教學筆記]<ListView>列表顯示之二－Michael_Jheng的部落格

接續[React-Native教學筆記]<ListView>列表顯示之一,介紹ListView進階用法,如下所示,

_renderRow(rowData: string, sectionID: number, rowID: number){

執行程式與函數

}

該方法有三個參數

rowData: string => dataSource資料

sectionID: number => 分組ID

rowID: number => 行ID

首先介紹ListView為這次標籤,這次範例有需要用到圖片,以陣列的方式撰寫,如下所示,

在picture增加圖片,如下所示,

主程式部份,使用props呼叫對應的父類別建構元,接下來創建ListView.DataSource之方法,利用 this.state = {dataSource: ds.cloneWithRows([要顯示的資料]),};,將要顯示的資料填在裏頭

接下來撰寫 _renderRow(rowData: string, sectionID: number, rowID: number)程式,在裏頭撰寫圖片Image與文字Text顯示,將this.state.dataSource數據存至dataSource,用renderRow取出數據,使用this._renderRow來呈現

接下來是Style程式,

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示此功能,

import {
AppRegistry,
StyleSheet,
ListView,
Text,
Image,
View
} from 'react-native';

/*
圖片陣列
*/
var Details = [
{image: require('./picture/01.png')},
{image: require('./picture/02.png')},
{image: require('./picture/03.png')},
{image: require('./picture/04.png')},
{image: require('./picture/05.png')},
{image: require('./picture/06.png')},
{image: require('./picture/07.png')},
{image: require('./picture/08.png')},
{image: require('./picture/09.png')},
{image: require('./picture/10.png')},
{image: require('./picture/11.png')},
{image: require('./picture/12.png')}
];

export default class AwesomeProject extends Component {

constructor(props) {
   /*
       呼叫對應的父類別建構元,props
   */
super(props);
   /*
       創建ListView.DataSource之方法
   */
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   /*
       設置要顯示的文字項目
   */
this.state = {
dataSource: ds.cloneWithRows([
       'row 1',
       'row 2',
       'row 3',
       'row 4',
       'row 5',
       'row 6',
       'row 7',
       'row 8',
       'row 9',
       'row 10',
       'row 11',
       'row 12'
       ]),
};
}

/*
   rowData: string => dataSource資料
   sectionID: number => 分組ID
   rowID: number => 行ID
*/
_renderRow(rowData: string, sectionID: number, rowID: number) {
return (
       <View>
           <View style={styles.container}>
               <Image style={styles.thumb} source={Details[rowID].image} />
               <Text style={styles.fontSize20}>
                   {'rowData:' + rowData + ',sectionID:' + sectionID + ',rowID:' + rowID}
               </Text>
           </View>
       </View>
);
}

render() {
return (
       <ListView
       /*
               將this.state.dataSource數據存至dataSource
           */
           dataSource={this.state.dataSource}
           /*
               用renderRow取出數據,並在_renderRow中顯示
           */
           renderRow={this._renderRow}
       />
);
}
}

const styles = StyleSheet.create({
/*
父類別flex:1 充滿整個空間
   padding: 10 在畫面四周預留10之大小的空白
   flexDirection: 'row' 畫面顯示已row方式來排列
justifyContent: 'flex-start' 佈局對齊方式:從開始端進行對齊
alignItems: 'flex-start' 項目對齊方式:從開始端進行對齊
*/
container: {
flex: 1,
padding: 10,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start'
},
/*
   圖片大小
   width: 50
   height: 50
*/
thumb: {
width: 50,
height: 50
},
/*
字形大小 20
*/
fontSize20: {
fontSize: 20
}
});