Question

我是反应原生的新手，我想按下到ListView中的特定项目，但当我点击项目我想要选择我没有得到控制台日志消息，我没有得到任何错误所以我的代码看起来像这样

在renderRow中，我的代码看起来像这样

renderRow(record) {
    return (
            <View style={styles.row}>
                <TouchableHighlight onPress={() => this._pressRow()}>
                    <View style={styles.info}>
                        <Text style={styles.items}>{record.nom}</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
}

和_pressRow函数简单控制台日志

 _pressRow (rowID: number) {
        console.log("clicked");
    }

和渲染功能

 render() {
        return (
            <ScrollView scrollsToTop={false} style={styles.menu}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                />
            </ScrollView>
        );
    }

我该如何解决这个问题，谢谢。

Answer 1

您使用的是autobind-decorator吗？使用您的代码，_pressRow方法不会被触发。当我添加autobind装饰器或将_pressRow更改为fat-arrow函数时，console.log对我有效：

import React, { Component } from 'react'
import { View, TouchableHighlight, Text, ScrollView, ListView } from 'react-native'

_pressRow = (rowID: number) => {
  console.log("clicked")
}

class App extends Component {
  constructor(props) {
    super(props)

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    })

    this.state = {
      dataSource: this.dataSource.cloneWithRows([
        { nom: 'a' },
        { nom: 'b' },
      ]),
    }
  }

  renderRow(record) {
    return (
      <View>
        <TouchableHighlight onPress={() => this._pressRow()}>
          <View>
            <Text>{record.nom}</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }

  render() {
    return (
      <ScrollView scrollsToTop={false}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </ScrollView>
    )
  }
}

export default App

Answer 2

如果您的功能在您的班级

中，请将this._pressRow()更改为this._pressRow.bind(this)

Answer 3

我使用TouchableHighlight打包“不可压缩”组件（同时将this._pressRow更改为this._pressRow.bind(this)）。

此外，某些组件（例如Text组件）不会填充ListView行的所有空格。因此onPress仅在您按下文本时才有效（如果您按下没有任何文本的行位置则不起作用）。因此，用TouchableHighlight组件包装是很有用的。

单击ListView中的项目React-Native不起作用

3 个答案: