Reagieren Sie nativ. Kontext in der berührbaren Highlight auf der Presse zu verlieren.

Question

Ich versuche, eine TouchableHighlight-Komponente zu einer Zeile in einer Listenansicht hinzuzufügen.

Die onPress-Funktion verursacht einen undefinierten Fehler im folgenden Code. Es funktioniert außerhalb der Listenansicht.

Ich vermute, das ist, weil ich den Kontext von this verlieren, aber nicht sicher, wie zu beheben. Wer kann helfen?

export default class ConversationsList extends Component { 
    constructor(props) { 
    super(props); 
    this._handleChangePage = this._handleChangePage.bind(this); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(Coversations.chats) 
    }; 
    } 

    _handleChangePage(chat) { 
    this.props.navigator.push({ 
     title: 'foo', 
     component: Chat, 
     passProps: { 
     chat: chat 
     } 
    }); 
    } 


    renderRow(chat){ 
    return (
     <View> 
     <TouchableHighlight onPress={() => this._handleChangePage.bind(this, chat) }> 
      <View> 
      /* more content removed */ 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

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

Ich vermute auch, dass ich nicht wirklich Dinge zu tun, auf diese Weise werden soll, dass meine Komponente anders strukturiert sein soll, so ist es den Presse-Handler als Stütze vielleicht übergeben. Jeder Rat geschätzt.

Answer 1

Sie eine andere Variable global es Verfahren wie

var _this; 

initialisieren erklären kann

render:function(){ 
_this = this; 

return(
... 
) 
} 

und verwenden Sie es in Ihrem touchableHightlight

renderRow(chat){ 
return (
    <View> 
    <TouchableHighlight onPress={() => _this._handleChangePage(chat) }> 
     <View> 
     /* more content removed */ 
     </View> 
    </TouchableHighlight> 
    </View> 
); 

}

Answer 2

ich in machen empfehlen, dies zu lesen helpful article

export default class ConversationsList extends Component { 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(Coversations.chats) 
    }; 
    } 

    _handleChangePage =() => { 
    this.props.navigator.push({ 
     title: 'foo', 
     component: Chat, 
     passProps: { 
     chat: this 
     } 
    }); 
    } 


    renderRow = (chat) => { 
    return (
     <View> 
     <TouchableHighlight onPress={ this._handleChangePage }> 
      <View> 
      /* more content removed */ 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

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