React Native-problem

Question

Witam,

uczę się pisać w reakcie native.

Alert który powinien wyświetlić się po kliknięciu przycisku, wyświetla się zaraz po starcie aplikacji.

Jest w stanie ktoś pomódz?

Z góry dziękuję za wszystkie odpowiedzi.

import React from 'react';
import {Button, Alert, View, Text, StyleSheet, ScrollView, TouchableHighlight} from "react-native";
import {Component} from "react";

export default class App extends Component {
  _kliknieto() {
    Alert.alert('Kliknięto!');
  }

  render() {
    return (
    <ScrollView style={styles.maincontainer}>
        <TouchableHighlight onPress={this._kliknieto()} underlayColor='#white'>
          <View style={styles.btn}>
            <Text style={styles.btntext}>Kliknij Mnie!</Text>
          </View>
        </TouchableHighlight>
    </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  maincontainer: {
    padding: 15,
    paddingTop: 30,
    backgroundColor: '#fce7c7',
  },
  logo: {
    backgroundColor: '#2b2b2b',
    color: '#fff',
    padding: 25,
  },
  btn: {
    marginBottom: 15,
    borderRadius: 3,
    color: '#fff',
    padding: 5,
    height: 50,
    backgroundColor: '#bc8f8f',
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  btntext: {
    textAlign: "center",
    color: '#fff',
    fontSize: 18,
  },
})

 

Answer 1

Do event handlerów zazwyczaj przekazuje się referencję funkcji (czyli samą jej nazwę), chyba, że dana funkcja sama zwraca inną funkcję. Wtedy nawiasy powodują, że od razu wołana jest pierwsza funkcja, która zwraca funkcję docelową i to ona jest przypisywana do handlera. U Ciebie natomiast jest zwykły przypadek.

Zamień więc

onPress={this._kliknieto()}

na

onPress={this._kliknieto} // bez nawiasów wywołujących funkcję

---

W razie problemów z this (typu "cannot read property _kliknieto of undefined") zastosuj bindowanie, albo owiń to w arrow function (wtedy już z nawiasami wołającymi funkcję):

• onPress={this._kliknieto.bind(this)}

• // args to najczęściej sam event, ale dla pewności można przekazać wszystkie argumenty
  onPress={(...args) => this._kliknieto(...args)}