Dev Faq
0
votes

ONPRESS NON FONCTION DE DÉCLIGATION

J'ai un petit composant et j'essaie de déclencher une fonction à l'improviste. J'ai d'abord essayé ce qui suit: Onpress = {this.slider} et je n'ai pas reçu de journal de console, puis j'ai essayé tinp = {() => {this.slider}} et n'a toujours pas reçu de journal de console. Enfin j'ai essayé oigning = {console.log ("bonjour")} et reçu un journal de console. Donc, je n'appelle clairement pas la fonction du curseur correctement. Je ne suis pas sûr de ce que je fais mal - quelque chose de stupide, je suis sûr. Toute aide est appréciée. 

class newWave extends Component {

    state = {
        format: "TTS"
    }

    slider = () => {
        console.log("hi");
        if (this.state.format === "TTS")
            this.setState({ format: "Voice" })
        else if (this.state.format === "Voice")
            this.setState({ format: "TTS" })
    }

    render() {

        return (
            <View style={{height:"100%", width: "100%", flexDirection:"column", justifyContent: "center", alignItems:"center"}}>
            <View style={{height: "75%", width:"75%", backgroundColor:"blue", borderRadius:20, flexDirection:"row", justifyContent:"flex-end"}}>
                <View style ={{backgroundColor:"transparent", height: "10%", width:"30%", margin: "2%"}}>
                <View style = {{backgroundColor:"orange", height: "100%", width:"100%", borderRadius: 20,  flexDirection:"row", justifyContent:this.state.format==="TTS"?"flex-start":"flex-end", alignItems:"center"}}>
                <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider}}></View>
                </View>
                </View>
            </View>
        </View>

        );
    }
}


export default newWave;

1 commentaires

Il suffit de changer afficher composant dans bouton ou touchablePacacité

6 Réponses :

3
votes

Permettez-moi de vous présenter à Touchabilité. La vue ne fournit pas un accessoire irréprochable. 

<TouchableOpacity onPress={()=> {
    this.slider();
    }
  }>
   <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} ></View>
</TouchableOpacity>

1 commentaires

À propos de la fois que vous avez vu la console.log, olfress = {console.log ("hello")} est parce que la mise en place des supports "()" déclenchera la fonction où qu'ils soient, l'enregistrant pendant chaque rendu. Si vous avez conservé le code et avez essayé de faire pression sur l'ONPRESS, vous remarqueriez qu'il ne s'agira pas réellement

2
votes

Dans Reagel Native, il existe trois façons d'appeler On TressApple: TouchAbaNativeFeedBack, TouchableHighlight et TouchablePacity

Alors enveloppez la vue à l'intérieur de l'un de ces trois, ce trois a des accessoires à l'impression.

0 commentaires
0
votes

Utilisez TouchableOpacity Code> '' S href = "https://facebook.github.io/react-native/docs/touchablewithoutfeedback#onpress" rel = "nfollow NOREFERRER"> Onpress () Code> Prop.

En outre, il y a Deux façons de lier les rappels dans réact. P >

  1. Utilisation de la syntaxe de terrain de classe publique li> ol> xxx pré>
    1. Utilisation de la fonction arrow li> OL> 
      function slider() {}

<TouchableOpacity onPress={() => this.slider()} />
  ...
</TouchableOpacity>

0 commentaires
0
votes

S'il vous plaît essayez ceci. Cela devrait fonctionner. La vue ne vient pas avec l'événement OnPress 

    <Button 
title='Hello'
style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider()}}>
</Button>

0 commentaires
0
votes

Essayez ce code: 

<TouchableOpacity
  style={{
    backgroundColor: 'green',
    height: '98%',
    width: '75%',
    borderRadius: 20,
    marginLeft: '1%',
    marginRight: '1%',
  }}
  onPress={this.slider}
/>

0 commentaires
0
votes

Vous devez envelopper la vue où vous souhaitez cliquer avec un code>, puis transmettez le olfress = {} code> sur le touchableopacity, comme suit 

<TouchableOpacity onPress={CALL_YOUR_FUNCTION_HERE}>
   <View .... /> //add your view here
</TouchableOpacity>

0 commentaires

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?