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?
quelle
disabled
Status die untergeordneten Rendering-Stile nicht ändert. Um den deaktivierten Status für Benutzer sichtbar zu machen, müssen Sie einen Stil auf dasText
Element anwenden, z. B.<Text style={{ opacity: 0.5 }}>I'm disabled</Text>
- nur zu Ihrer InformationMach das einfach
quelle
<Text>{text}</FontText>
? FontText?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) ...
quelle
TouchableOpacity empfängt
activeOpacity
. Sie können so etwas tunWenn es aktiviert ist, sieht es normal aus, andernfalls sieht es ohne Rückmeldung wie berührbar aus.
quelle
Diese native Basis gibt es Lösung:
quelle
Um Text zu deaktivieren, müssen Sie die Deckkraft: 0 im Textstil wie folgt einstellen:
quelle
Sie können einen CustButton mit bauen
TouchableWithoutFeedback
, und stellen Sie die Wirkung und Logik , die Sie mitonPressIn
,onPressout
oder andere Requisiten.quelle
Ich konnte dies beheben, indem ich eine Bedingung in die style-Eigenschaft einfügte.
quelle
Hier ist meine Arbeit dafür, ich hoffe es hilft:
In
SignUpStyleSheet.inputStyle
enthält den Stil für die Schaltfläche, wenn sie deaktiviert ist oder nicht. Instyle={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}
füge ich die Opazitätseigenschaft hinzu, wenn die Schaltfläche deaktiviert ist.quelle
Sie können die Schaltfläche aktivieren und deaktivieren oder die Bedingung verwenden oder direkt standardmäßig deaktivieren: true
quelle
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.
CSS:
quelle