react-native - React Native：TouchableHighLight onPress 在 ListView 的 renderHeader 方法中不起作用

Question

我这样做的方式如下，当按下标题时，不透明度确实发生了变化，但chrome调试器控制台中没有记录任何内容。

  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函数传递给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，并且onPressprop 很好，它不会尝试调用该函数，并且您不会收到错误消息，因此难以跟踪。

Answer 2

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

更改 this.renderHeader 应该可以工作。