Question

我刚刚创建了一个新的react native应用并尝试创建一个函数和console.log on on touchableOpacity，但它给出了错误的消息，那就是未定义functionName。

这是我的代码：

import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';

export default class Home extends Component {


    functionName = () => {
        console.log('function called');
    }


    render() {
        return (
            <ScrollView contentContainerStyle={styles.container}>
                <TouchableOpacity onPress={functionName()}>
                    <Text> Home {sliderApi} </Text>
                </TouchableOpacity>
            </ScrollView>
        )
    }
}

但是当我将functionName放在render方法中时，效果很好。

Answer 1

替换

<TouchableOpacity onPress={functionName()}>

与

<TouchableOpacity onPress={this.functionName}>

或带有

<TouchableOpacity onPress={() => this.functionName()}>

只是为了了解知识： {this.functionName}和{（）=> this.functionName（）}之间没有区别。使用 箭头函数“（）=>” 的原因是我们正在调用带有括号（）的函数 “ this.functionName（）”。当我们使用 括号（） 调用函数时，将在执行代码时直接调用该函数。但是，当我们只想在“ TouchableOpacity或任何组件” 发生“ onPress或任何事件” 时调用该函数时，我们必须将其与 箭头函数“（）=>” ，或者我们只需将其命名为 “ this.functionName” 。

Answer 2

您在onPress事件中以错误的方式调用了该函数。尝试替换以下行：

<TouchableOpacity onPress={functionName()}>

使用

<TouchableOpacity onPress={() => this.functionName()}>

无法在React Native 0.61.1中的渲染外部创建函数

2 个答案: