React-native dönüştürücü getInitialState (ES5) yapıcıya (ES6) "ListView)

Question

React-native'e ancak getInitialState'i constructor'a dönüştürürken bazı sorunlara girmeye çalışıyorum.İsimleri satır geçirebildiğim bir ListView üzerinde çalışıyorum. getInitialState ile ancak bir kurucu ile

dönüştürülen kodu:.

'use strict'; 

var React = require('react-native'); 
var { 
    StyleSheet, 
    ListView, 
    Text, 
    View, 
} = React; 

var styles = StyleSheet.create({ 
    container: { 
     backgroundColor: '#f2f2f2', 
     flex: 1, 
    }, 
    listview: { 
     flex: 1, 
    }, 
    li: { 
     backgroundColor: '#fff', 
     borderBottomColor: '#eee', 
     borderColor: 'transparent', 
     borderWidth: 1, 
     paddingLeft: 16, 
     paddingTop: 14, 
     paddingBottom: 16, 
    }, 
    liText: { 
     color: '#333', 
     fontSize: 16, 
    }, 
    statusbar: { 
     backgroundColor: '#fff', 
     height: 22, 
    } 
}) 

var btnsTypes = [ 
    {text: 'Primary', type: 'primary',}, 
    {text: 'Secondary', type: 'secondary',}, 
    {text: 'Delete', type: 'delete',} 
] 


var rows = [ 
    { 
     text: "Buttons swipe left", 
     right: btnsTypes, 
    }, 
    { 
     text: "Buttons swipe left", 
     right: btnsTypes, 
    } 
] 

// include react-native-swipeout 
var Swipeout = require('react-native-swipeout') 


// example swipout app 
class swipeoutExample extends React.Component { 

    constructor(){ 
     super() 
     var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 

     this.state = { 
      dataSource: ds.cloneWithRows(rows), 
      scrollEnabled: true 
     }; 
    } 


// set scrolling to true/false 
    _allowScroll (scrollEnabled) { 
     this.setState({ scrollEnabled: scrollEnabled }) 
    } 

// set active swipeout item 
    _handleSwipeout (rowID) { 
     for (var i = 0; i < rows.length; i++) { 
      console.log(rowID) 
      if (i != rowID) rows[i].active = false 
      else rows[i].active = true 
     } 
     this._updateDataSource(rows) 
    } 

    _updateDataSource (data) { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(data) 
     }) 
    } 

    _renderRow (rowData: string, sectionID: number, rowID: number) { 
     return <Swipeout 
      left={rowData.left} 
      right={rowData.right} 
      rowID={rowID} 
      sectionID={sectionID} 
      autoClose={rowData.autoClose} 
      backgroundColor={rowData.backgroundColor} 
      close={!rowData.active} 
      onOpen={(sectionID, rowID) => this._handleSwipeout(rowID)} 
      scroll={event => this._allowScroll(event)}> 
      <View style={styles.li}> 
       <Text style={styles.liText}>{rowData.text}</Text> 
      </View> 
     </Swipeout> 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.statusbar}/> 
       <ListView 
        scrollEnabled={this.state.scrollEnabled} 
        dataSource={this.state.dataSource} 
        renderRow={this._renderRow} 
        style={styles.listview}/> 
      </View> 
     ) 
    } 
} 

module.exports = swipeoutExample; 

hata iletisi:

işleri

getInitialState: Her şeyi ve her şeyi denedim

var swipeoutExample = React.createClass({ 
    getInitialState: function() { 
     // datasource rerendered when change is made (used to set  swipeout to active) 
     var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 

     return { 
      dataSource: ds.cloneWithRows(rows), 
      scrollEnabled: true 
     } 
    } 

aynı olmalı, ama her zaman olduğu gibi o değil mi. Umarım herkes yardımcı olabilir. Herşeyi denediniz.

Answer 1

Sorununuz, getInitalState ile ilgili değil. Şey, ES6 sınıflarında React, yöntemlerinizi this'a bağlamaz. Yani _renderRow yönteminiz yanlış bağlamla çağrılmaktadır.

Sen constructor

constructor() { 
    super() 
    var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 
    this.state = { 
     dataSource: ds.cloneWithRows(rows), 
     scrollEnabled: true 
    }; 

    this._renderRow = this._renderRow.bind(this); // <- now your method always save context of this class 
}