Deaktivieren von Schaltflächen beim Reagieren nativ

Ich mache eine Android-App mit React Native und habe die TouchableOpacity-Komponente verwendet, um Schaltflächen zu erstellen.
Ich verwende eine Texteingabekomponente, um Text vom Benutzer zu akzeptieren, und die Schaltfläche sollte erst aktiviert werden, wenn die Texteingabe mit einer bestimmten Zeichenfolge übereinstimmt.
Ich kann mir eine Möglichkeit vorstellen, dies zu tun, indem ich die Schaltfläche zunächst ohne den TouchableOpactiy-Wrapper rendere und mit dem Wrapper erneut rendere, sobald die Eingabezeichenfolge übereinstimmt.
Aber ich vermute, es gibt einen viel besseren Weg, dies zu tun. Kann jemand helfen?

TouchableOpacityUmfang TouchableWithoutFeedback, so dass Sie nur die disabledEigenschaft verwenden können:

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

Reagieren Sie auf die Dokumentation zu Native TouchableWithoutFeedback #disabled

Mach das einfach

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

Dies scheint die Art von Dingen zu sein, die mit einer Komponente höherer Ordnung gelöst werden könnten. Ich könnte mich irren, weil ich Schwierigkeiten habe, es zu 100% selbst zu verstehen, aber vielleicht ist es hilfreich für Sie (hier ein paar Links) ...

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

TouchableOpacity empfängt activeOpacity. Sie können so etwas tun

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

Wenn es aktiviert ist, sieht es normal aus, andernfalls sieht es ohne Rückmeldung wie berührbar aus.

Diese native Basis gibt es Lösung:

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

Um Text zu deaktivieren, müssen Sie die Deckkraft: 0 im Textstil wie folgt einstellen:

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

Sie können einen CustButton mit bauen TouchableWithoutFeedback, und stellen Sie die Wirkung und Logik , die Sie mit onPressIn, onPressoutoder andere Requisiten.

Ich konnte dies beheben, indem ich eine Bedingung in die style-Eigenschaft einfügte.

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

Hier ist meine Arbeit dafür, ich hoffe es hilft:

<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.inputStyleenthält den Stil für die Schaltfläche, wenn sie deaktiviert ist oder nicht. In style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}füge ich die Opazitätseigenschaft hinzu, wenn die Schaltfläche deaktiviert ist.

Sie können die Schaltfläche aktivieren und deaktivieren oder die Bedingung verwenden oder direkt standardmäßig deaktivieren: 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>

Ich denke, der effizienteste Weg ist es, die berührbare Kapazität mit einer Ansicht zu versehen und den Prop-Zeiger Ereignisse mit einer Stilbedingung hinzuzufügen.

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