React Native - onPress 函数不触发

Question

我一直在尝试使用以下代码创建一个在警告框中显示消息的按钮：

buttonClicked= () => {return alert("clicked")}

<TouchableOpacity onPress={()=>this.buttonClicked()} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

但是，单击 "Skip" 文本不会触发 buttonClicked 功能。我能够触发该功能的唯一方法是当我从 onPress class 中删除箭头功能时。 onPress={this.buttonClicked()} 但是，这会导致函数仅在应用程序首次启动时触发。我不确定我做错了什么。

代码的所有部分都期望 App.js:

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

export default class Tutorials extends Component {
    constructor()
    {
        super();
        this.state={
            currentPage: 1,
            totalPages: 3,
        }
    }

    setCurrentPage = () => {return alert("clicked")}

    renderTutorial = () =>{
        if(this.state.currentPage === 1)
        {
            return(
                <View style={styles.container}>
                    <Image style={styles.arrow} source={require('../../assets/path.png')}/>
                    <Text style={styles.pages}>{this.state.currentPage + ' of ' + this.state.totalPages}</Text>

                    <TouchableOpacity onPress={()=>this.setCurrentPage()} style={styles.skip}>
                        <Text>Skip</Text>
                    </TouchableOpacity>


                    <Text style={styles.header}>Refer to friend</Text>
                    <Text style={styles.paragraph}>Your friend will also receive credits</Text>

                    <TouchableOpacity style={styles.inviteFriendsButton} onPress={()=>alert("clicked!")}>
                        <Image source={require('../../assets/buttonInviteFriends.png')}/>
                    </TouchableOpacity>
                </View>
            );
        }
        if(this.state.currentPage === 2)
        {
            <View>Page 2</View>
        }
        if(this.state.currentPage === 3)
        {
            <View>Page 3</View>
        }
    }


    render() {
        return (
            this.renderTutorial()
        )
    }
}

Answer 1

试试这个

onPress={this.buttonClicked}

Answer 2

尝试按以下方式修改您的代码：

buttonClicked = () => alert("clicked")

<TouchableOpacity onPress={this.buttonClicked} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

或出于测试目的将其直接插入 onPress:

<TouchableOpacity onPress={() => alert("clicked")} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

Answer 3

在这种情况下，您应该将通过 onPress 道具触发的功能更改为

buttonClicked() {
    return alert("clicked")
}

Answer 4

<TouchableOpacity onPress={this.buttonClicked} style={styles.skip}>
   <Text>Skip</Text>
</TouchableOpacity>

希望对你有用。

Answer 5

见下例

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

class App extends React.Component {
  buttonClicked = () => {
    return alert('clicked');
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
          onPress={this.buttonClicked}  
          style={styles.skip}>
          <Text>Skip</Text>
        </TouchableOpacity>
      </View>    
    );
  }
}

const styles = {
  skip: {
    width: '90%',
    padding: 10,
    backgroundColor: 'green',
  },
};

export default App;

有疑问欢迎留言。

Answer 6

问题是 absolute 定位更改解决了问题。

React Native - onPress 函数不触发

React Native - onPress function does not trigger

javascript

reactjs

react-native

react-native-android