使用TouchableHighlight的onPress调用函数报错：找不到变量onPressCalenderView

问题分析 #

你遇到的ReferenceError: Can't find variable: onPressCalenderView错误，主要有以下几个可能原因：

• JSX语法错误：代码中TouchableHighlight组件与onPress属性之间缺少空格，导致React无法正确解析属性，进而误判为找不到变量。
• 函数定义位置错误：onPressCalenderView函数未定义在组件类内部，导致this无法访问到该方法。
• 拼写不一致：函数名在调用和定义时存在大小写或拼写差异。

修正步骤 #

1. 修复JSX语法错误 #

将连写的TouchableHighlightonPress改为TouchableHighlight onPress，保证组件名与属性间有空格：

render() {
  return (
    <TouchableHighlight onPress={this.onPressCalenderView}>
      <Text style={{color:'black', fontSize:20}}>dd/mm/yyyy</Text>
    </TouchableHighlight>
  )
};

2. 确保函数定义在类内部 #

确认onPressCalenderView是组件类的实例方法，完整组件示例如下：

import React, { Component } from 'react';
import { TouchableHighlight, Text } from 'react-native';

class YourComponent extends Component {
  state = {
    showCalendarView: false
  };

  onPressCalenderView = async () => {
    try {
      this.setState({showCalendarView: true});
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    return (
      <TouchableHighlight onPress={this.onPressCalenderView}>
        <Text style={{color:'black', fontSize:20}}>dd/mm/yyyy</Text>
      </TouchableHighlight>
    )
  };
}

export default YourComponent;

3. 检查拼写一致性 #

确认调用时的this.onPressCalenderView和定义的函数名完全一致，比如注意Calender和Calendar的拼写差异，建议与状态变量showCalendarView的拼写统一，避免混淆。

内容的提问来源于stack exchange，提问作者Sudheshna Tholikonda