Désactivation des boutons sur React Native

Je crée une application Android en utilisant React native et j'ai utilisé le composant TouchableOpacity pour créer des boutons.
J'utilise un composant d'entrée de texte pour accepter le texte de l'utilisateur et le bouton ne doit être activé qu'une fois que l'entrée de texte correspond à une certaine chaîne.
Je peux penser à un moyen de le faire en rendant initialement le 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 faire cela. Quelqu'un peut-il aider?

TouchableOpacityextents TouchableWithoutFeedback, vous pouvez donc simplement utiliser la disabledpropriété:

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

Documentation React Native TouchableWithoutFeedback #disabled

Fais juste ça

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

Cela semble être le genre de chose qui pourrait être résolue en utilisant un composant d'ordre supérieur. Je peux me tromper parce que j'ai du mal à le comprendre à 100% moi-même, mais peut-être que cela vous sera utile (voici quelques liens) ...

• http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm
• http://jamesknelson.com/structuring-react-applications-higher-order-components/

TouchableOpacity reçoit activeOpacity. Tu peux faire quelque chose comme ça

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

Donc, s'il est activé, il aura l'air normal, sinon, il ressemblera à toucher sans retour.

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>

Pour désactiver le texte, vous devez définir l'opacité: 0 dans le style de texte comme ceci:

<TouchableOpacity style={{opacity:0}}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

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

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
}
})

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.inputStylecontient 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é d'opacité si le bouton est désactivé.

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>

Je pense que le moyen le plus efficace est d'envelopper le touchableOpacity avec une vue et d'ajouter les prop pointerEvents 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
  }