web-dev-qa-db-fra.com

Désactivation des boutons réactifs natifs

Je crée une application Android à l'aide de react native et j'ai utilisé le composant TouchableOpacity pour créer des boutons.
J'utilise un composant de saisie de texte pour accepter le texte de l'utilisateur et le bouton devrait ne doit être activé que lorsque la saisie de texte correspond à une chaîne donnée.
Je peux imaginer un moyen de le faire en effectuant d'abord le rendu du bouton sans le wrapper TouchableOpactiy et en effectuant un nouveau rendu avec le wrapper une fois que la chaîne d'entrée correspond.
Mais je suppose qu’il existe une bien meilleure façon de procéder. Quelqu'un peut-il aider?

react-native
121
Jeff P Chacko

TouchableOpacity étendues TouchableWithoutFeedback, vous pouvez donc simplement utiliser la propriété disabled:

<TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

Réagir à la documentation TouchableWithoutFeedback Native #disabled

236
Julien Deniau

Fais juste ça

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>
38
Tallboy

Cela semble être le genre de problème qui pourrait être résolu en utilisant un composant d'ordre supérieur. Je peux me tromper cependant car j'ai du mal à comprendre cela à 100% moi-même, mais peut-être que ça vous aidera (voici quelques liens) ...

3
Chris Geirman

TouchableOpacity reçoit activeOpacity. Vous pouvez faire quelque chose comme ça

<TouchableOpacity activeOpacity={enabled ? 0.5 : 1}>
</TouchableOpacity>

Donc, si elle est activée, cela aura l'air normal, sinon, cela ressemblera à toucher sans retour en arrière.

1
eyal83

Assurez-vous que TouchableOpacity soit désactivé en utilisant le code suivant:

<TouchableOpacity disabled={true}>
  <Text>Submit</Text>
</TouchableOpacity>
0
Vikram Biwal

J'ai pu résoudre ce problème en mettant un conditionnel dans la propriété de style.

const startQuizDisabled = () => props.deck.cards.length === 0;

<TouchableOpacity
  style={startQuizDisabled() ? styles.androidStartQuizDisable : styles.androidStartQuiz}
  onPress={startQuiz}
  disabled={startQuizDisabled()}
>
  <Text 
    style={styles.androidStartQuizBtn} 
  >Start Quiz</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
androidStartQuiz: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1
},
androidStartQuizDisable: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1,
    opacity: 0.4
},
androidStartQuizBtn: {
    color: "white",
    fontSize: 24
}
})
0
Cory McAboy

Je pense que le moyen le plus efficace consiste à envelopper la touchableOpacity avec une vue et à ajouter le prop pointeurEvents avec une condition de style.

<View style={this.state.disabled && commonStyles.buttonDisabled}        
      pointerEvents={this.state.disabled ? "none" : "auto"}>
  <TouchableOpacity
    style={styles.connectButton}>
  <Text style={styles.connectButtonText}">CONNECT </Text>
  </TouchableOpacity>
</View>

CSS:

buttonDisabled: {
    opacity: 0.7
  }
0
Ammar Ismaeel

cette base native il y a une solution:

  <Button
    block
    disabled={!learnedWordsByUser.length}
    style={{ marginTop: 10 }}
    onPress={learnedWordsByUser.length && () => {
      onFlipCardsGenerateNewWords(learnedWordsByUser)
      onFlipCardsBtnPress()
    }}
  >
    <Text>Let's Review</Text>
  </Button>
0
Anja Ishmukhametova

Vous pouvez activer et désactiver le bouton ou en utilisant la condition ou directement par défaut, il sera désactivé: true

 // in calling function of button 
    handledisableenable()
        {
         // set the state for disabling or enabling the button
           if(ifSomeConditionReturnsTrue)
            {
                this.setState({ Isbuttonenable : true })
            }
          else
          {
             this.setState({ Isbuttonenable : false})
          }
        }

<TouchableOpacity onPress ={this.handledisableenable} disabled= 
     {this.state.Isbuttonenable}>

    <Text> Button </Text>
</TouchableOpacity>
0
keerthi c

Voici mon travail pour cela, j'espère que cela aide:

<TouchableOpacity
    onPress={() => {
        this.onSubmit()
    }}
    disabled={this.state.validity}
    style={this.state.validity ?
          SignUpStyleSheet.inputStyle :
          [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}>
    <Text style={SignUpStyleSheet.buttonsText}>Sign-Up</Text>
</TouchableOpacity>

dans SignUpStyleSheet.inputStyle conserve le style du bouton lorsqu'il est désactivé ou non, puis dans style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} j'ajoute la propriété opacity si le bouton est désactivé.

0
Xdabier

Vous pouvez créer un CustButton avec TouchableWithoutFeedback et définir l'effet et la logique souhaités avec onPressIn, onPressout ou d'autres accessoires.

0
Fomahaut