13.png

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

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

  執行程式與函數

}

該方法有三個參數

rowData: string => dataSource資料

sectionID: number => 分組ID

rowID: number => 行ID

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

04.JPG

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

01.JPG

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

05.JPG

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

06.JPG

接下來是Style程式,

07.JPG

接下來修改在[筆記]安裝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
  }      
});

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,除了圖片顯示外,可以看到rowData: string, sectionID: number, rowID: number這三個參數

02.JPG

03.JPG

arrow
arrow

    鄭智遠 發表在 痞客邦 留言(0) 人氣()