React Native：TouchableHighLight onPressがListViewのrenderHeaderメソッドで機能していません

Question

私がやったやり方は、ヘッダーを押すと不透明度は変わりますが、クロムデバッガーコンソールには何も記録されません。 this.renderHeaderへ

onHeaderPressed() { 
    console.log('onHeaderPresseded is called'); 
    } 

    renderHeader() { 
    return (
     <TouchableOpacity 
     style={styles.header} 
     onPress={this.onHeaderPress} 
     activeOpacity={0.6} 
     underlayColor={'blue'}> 
     <View> 
      <Text> 
      Click here 
      </Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 


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

Answer 1

renderHeader() { 
    return (
     <TouchableOpacity 
     style={styles.header} 
     onPress={this.renderHeader} 
     activeOpacity={0.6} 
     underlayColor={'blue'}> 
     <View> 
      <Text> 
      Click here 
      </Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 

変更は動作するはずです。

Answer 2

これはバインディングの問題です。 renderHeader関数をListViewコンポーネントに渡すと、ListViewのスコープから呼び出され、コンポーネントのものから呼び出されることはなく、onHeaderPressへの参照が失われます。あなたはこのようなあなたの機能をbindする必要があります：それは静かに失敗したので

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

は、これは非常に厄介なバグです。オブジェクト内の未定義のキーにアクセスすると、単にundefinedが返され、onPress小道具はそれでうまくいきます。関数を呼び出そうとせず、エラーメッセージも表示されず、追跡が困難になります。