React Native(TypeScript)中NativeBase ListItem点击报错_this2.onClick不是函数的疑问

首先明确一点：TypeScript不会自动帮你绑定类方法到组件实例的this上下文。这和原生JavaScript ES6类的行为完全一致——类中的普通方法默认不会绑定this，当你把这类方法作为事件处理函数传递给组件（比如你的ListItem）时，this会丢失指向，变成undefined（React Native默认运行在严格模式下），这就是你看到_this2.onClick is not a function报错的核心原因。

接下来给你几种靠谱的解决方法，按推荐程度排序：

1. 使用类属性箭头函数（最推荐） #

箭头函数没有自己的this，会自动继承外层上下文（也就是你的组件实例）的this，写法简洁且不会出现绑定问题，是目前React开发中最常用的方式：

import React, { Component } from 'react';
import { List, ListItem } from 'native-base';

class YourComponent extends Component {
  // 用箭头函数定义点击处理方法，自动绑定this
  handleListItemClick = () => {
    console.log('列表项被点击了');
    // 这里可以正常访问this.props、this.state等组件实例属性
  };

  render() {
    return (
      <List>
        {/* 注意：NativeBase的ListItem和TouchableOpacity一样，用onPress事件而非Web端的onClick */}
        <ListItem onPress={this.handleListItemClick}>
          {/* 你的列表项内容 */}
        </ListItem>
      </List>
    );
  }
}

2. 在构造函数中手动绑定this #

这是传统的React绑定方式，适合不想用类属性箭头函数的场景，绑定逻辑集中在构造函数里，便于统一管理：

import React, { Component } from 'react';
import { List, ListItem } from 'native-base';

class YourComponent extends Component {
  constructor(props) {
    super(props);
    // 手动把handleListItemClick绑定到当前组件实例
    this.handleListItemClick = this.handleListItemClick.bind(this);
  }

  handleListItemClick() {
    console.log('列表项被点击了');
  }

  render() {
    return (
      <List>
        <ListItem onPress={this.handleListItemClick}>
          {/* 你的列表项内容 */}
        </ListItem>
      </List>
    );
  }
}

3. 在render中用箭头函数包裹（不推荐大量使用） #

这种方式虽然能临时解决问题，但每次组件render时都会创建一个新的箭头函数，如果你的列表有大量项，可能会触发不必要的重渲染，影响性能：

import React, { Component } from 'react';
import { List, ListItem } from 'native-base';

class YourComponent extends Component {
  handleListItemClick() {
    console.log('列表项被点击了');
  }

  render() {
    return (
      <List>
        <ListItem onPress={() => this.handleListItemClick()}>
          {/* 你的列表项内容 */}
        </ListItem>
      </List>
    );
  }
}

额外提醒 #

你提到ListItem类似TouchableOpacity，要注意React Native中触摸组件的标准事件是onPress，而非Web端的onClick——如果你的代码里写的是onClick，即使绑定了this也可能无法触发事件，记得改成onPress哦。

内容的提问来源于stack exchange，提问作者Smart Solutions