如何在反应原生中调用组件 onPress TouchableOpacity

问题描述

我正在使用 react-native 的 TouchableOpacity。代码是：

<TouchableOpacity onPress={onPress}>
    <Text style={styles.supplementItem}>{item.item}</Text>
</TouchableOpacity>

其中 OnPress 函数为：

 const onPress = () => (
  // eslint-disable-next-line no-sequences
  <Text style={styles.supplementItem}>Hello</Text>
  this.setState({tempKey: tempKey + 1})
);

我看了看：this question 并尝试喜欢它。但这是行不通的。我将我的状态设置如下：

constructor(props) {
super(props);
this.state = {
  tempKey: 0,};

}

请帮助我做错了什么。

解决方法

您提到的问题是使用基于函数的组件，而您正在使用基于类的组件，正如您展示的证明了这一点的构造函数部分。

所以 onPress 必须是您的情况下该类中的一个方法，因此您不需要在它之前使用 const 关键字，您需要以这种方式调用它； this.onPress

简而言之，你的整个组件应该是这样的；

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

class YourComp extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      tempKey: 0,show: false
    };
    
    }
    onPress = () => {
      // eslint-disable-next-line no-sequences
      this.setState(prevState => ({tempKey: prevState.tempKey + 1}))
    };

render() {
   return (
<View>
    <TouchableOpacity style={{height: 100,justifyContent: 'center',alignItems: 'center'}} onPress={() => this.onPress()}>
        <Text>Hello (item.item in your case)</Text>
    </TouchableOpacity>

      <Text key={this.state.tempKey.toString()}>Hello {this.state.tempKey}</Text>
</View>
  )


}


}
export default YourComp;

如果你想有条件地显示某个组件；

this.state = {
      ...,show: false

}

然后在onPress方法中；

this.setState(prevState => ({show: !prevState.show})) // this will make <Text /> to toggle the modal when clicked.

然后在render方法中；

<Text>
  {this.state.show && (
    <YourNewComponent />

) || null}


</Text>