React Native - функция onPress не срабатывает

Question

Я пытался создать кнопку, которая показывает сообщение в окне предупреждения, используя следующий код:

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

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

Однако нажатие на текст «Пропустить» не вызывает функцию buttonClicked. Единственный способ, которым я мог вызвать функцию, был, когда я удалил функцию стрелки из класса onPress. onPress={this.buttonClicked()} Но это приводит к тому, что функция запускается только при первом запуске приложения. Я не уверен, что я делаю неправильно.

Все части кода ожидают приложения. 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

Проблема была в изменении положения absolute, которое решило проблему.

Answer 2

См. Пример ниже

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 3

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

Надеюсь, это будет работать для вас.

Answer 4

В этом случае вам следует изменить функцию, которую вы запускаете, с помощью onPress prop на

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

Answer 5

Попробуйте изменить код следующим образом:

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 6

Попробуйте это

onPress={this.buttonClicked}