[Wondgirl]从零开始学React Native之ListView(八)

这里写图片描述

点击每一行后会在Xcode控制台里打印.

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class demo extends Component {

  //构造器(数据源)
  constructor(props)
  {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    this.state = {
        dataSource:ds.cloneWithRows(['row 1','row 2','row 3'])
    };
  }
  render() {
    return (
      <View style={{margin:30}}>

      <ListView 
           dataSource={this.state.dataSource} 
           renderRow={
                  (rowData) =>
                  <View style={styles.item} >
                     <Text onPress = {this.onPress.bind(this,{rowData})} >
                         {rowData}
                     </Text>
                  </View>
            }/>
      </View> 
    );
  }
  onPress(text){
    console.info(text.rowData);
  }
}

//样式
const styles = StyleSheet.create({
  item:{

      height:20,
      borderBottomWidth:1,
      borderBottomColor:'#ddd'



  }

});

AppRegistry.registerComponent('demo', () => demo);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值