React-Native ListView renderDüzenleme sorunları sahne alır. Doğru yol ya Tepki-Native bir ListView ile çalışma yanlış yol

Question

, ben sadece referansla sahne olarak, bu liste öğesine sahne hareketli, aynı değildir

1. Geçiş fonksiyonları gördük ve çocuk bileşeni parametreleri çağırmak veya

2. Geçiş fonksiyonları tanımlanmış parametrelerle sahne olarak ve çözümleri

yok çalışır çocukta hiçbir parametrelerle işlevi çağırmak.

Çağrılan işlev, Redux öğesinin yaratıcılarıdır ve gönderilir. Bu Redux veya bir konudur

Bu // hata olarak snippet'itir pazar (belki ReactJS)-Doğalöğesini tepki

class App extends Component { 

    // On props 
    // data: an Array 
    // doThis: an action creator of Redux 
    // doThat: idem 

    constructor(){ 
    super(); 
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    } 

    render() { 
    const dataSource = this.ds.cloneWithRows(this.props.data); 

    return (
     <View> 
     <ListView style={{flex:1}} 
      dataSource={dataSource} 
      renderRow={(rowData, sectionID, rowID) => 
       <Item rowData={rowData} 
       //ERROR 
       //onPress={this.props.doThis} 
       //onLongPress={this..props.doThat} 
       //RIGHT NO ERROR TOO 
       onPress={() => this.props.doThis(rowData)} 
       onLongPress={() => this.props.doThat(rowData)} 
       /> 
      } 
      /> 
     </View> 
    ) 
    } 
} 

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      //ERROR 
      //onPress={() => { this.props.onPress(this.props.rowData) }} 
      //onLongPress={() => { this.props.onLongPress(this.props.rowData) }} 
      //WRONG TOO 
      onPress={this.props.onPress} 
      onLongPress={this.props.onLongPress} 
      > 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

yoktur iyi olanlar tarafından takip çalışmaları does'nt kod satırları Bu sorunla ilgili bir repo burada https://github.com/srlopez/test Şimdiden teşekkürler

Answer 1

Muhtemelen this kapağınızda ayarlanamayan bir sorun olabilir.

bu şekilde bağlayıcı deneyin: üst düzey geri aramaları bir parametre kabul edersek

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      onPress={this.props.onPress.bind(this, this.props.rowData)} 
      onLongPress={this.props.onLongPress.bind(this, this.props.rowData)} 
      > 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

Answer 2

, kendi anonim fonksiyonlar yanı (bir parametre kabul emin olmak gerekir Not: Ok sözdizimi kullanılarak anonim fonksiyonları yaratır işlevimizi otomatik olarak geçerli bağlamdaki this değerine bağlar). Ben ya da geri aramaları yanlış bağlamda (pencere) veya geçirilen argümanları kabul değildi bağlı sorunların bir arada tanık düşünüyorum:

class App extends Component { 

    // On props 
    // data: an Array 
    // doThis: an action creator of Redux 
    // doThat: idem 

    constructor(){ 
    super(); 
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    } 

    render() { 
    const dataSource = this.ds.cloneWithRows(this.props.data); 

    return (
     <View> 
     <ListView style={{flex:1}} 
      dataSource={dataSource} 
      renderRow={(rowData, sectionID, rowID) => 
       <Item rowData={rowData} 
        onPress={(data) => this.props.doThis(data)} 
        onLongPress={(data) => this.props.doThat(data)} /> 
      }/> 
     </View> 
    ) 
    } 
} 

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      onPress={() => this.props.onPress(this.rowData)} 
      onLongPress={() => this.props.onLongPress(this.rowData)}> 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}