Disabilitare i pulsanti su reattivo nativo

Sto realizzando un'app per Android utilizzando la reattiva nativa e ho usato il componente TouchableOpacity per creare pulsanti.
Uso un componente di input di testo per accettare il testo dell'utente e il pulsante deve essere abilitato solo quando l'input di testo corrisponde a una determinata stringa.
Mi viene in mente un modo per farlo eseguendo inizialmente il rendering del pulsante senza il wrapper TouchableOpactiy e il rendering con il wrapper una volta che la stringa di input corrisponde.
Ma suppongo che ci sia un modo molto migliore per farlo. Qualcuno può aiutare?

TouchableOpacitysi estende TouchableWithoutFeedback, quindi puoi semplicemente usare la disabledproprietà:

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

Documentazione React Native TouchableWithoutFeedback #disabled

Fallo e basta

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

Questo sembra il tipo di cosa che potrebbe essere risolto utilizzando un componente di ordine superiore. Potrei sbagliarmi perché sto lottando per capirlo al 100% da solo, ma forse ti sarà utile (ecco un paio di link) ...

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

TouchableOpacity riceve activeOpacity. Puoi fare qualcosa del genere

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

Quindi, se è abilitato, sembrerà normale, altrimenti sembrerà touchable senza risposta.

questa base nativa esiste una soluzione:

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

Per disabilitare il testo devi impostare l'opacità: 0 in Stile testo in questo modo:

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

Puoi costruire un CustButton con TouchableWithoutFeedback, e impostare l'effetto e la logica con cui vuoi onPressIn, onPressouto altri oggetti di scena.

Sono stato in grado di risolvere questo problema mettendo un condizionale nella proprietà 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
}
})

Ecco il mio lavoro per questo spero che possa aiutare:

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

in SignUpStyleSheet.inputStylecontiene lo stile per il pulsante quando è disabilitato o meno, quindi in style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}aggiungo la proprietà di opacità se il pulsante è disabilitato.

È possibile abilitare e disabilitare il pulsante o utilizzando la condizione o direttamente per impostazione predefinita sarà disabilitato: vero

 // 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>

Penso che il modo più efficace sia avvolgere l'Opacità toccabile con una vista e aggiungere il puntatore a puntello Evento con una condizione di stile.

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