Deaktivieren von Schaltflächen beim Reagieren nativ

155

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?

Jeff P Chacko
quelle

Antworten:

305

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

Julien Deniau
quelle
Haben Sie irgendetwas, das einen Hinweis darauf geben könnte, was bei Ihnen nicht funktioniert? Welche Version von RN verwenden Sie? Können Sie uns einen Code zeigen? Nur ein Link zur RN-Dokumentation, um Ihnen zu helfen: facebook.github.io/react-native/docs/…
Julien Deniau
9
Beachten Sie, dass der disabledStatus die untergeordneten Rendering-Stile nicht ändert. Um den deaktivierten Status für Benutzer sichtbar zu machen, müssen Sie einen Stil auf das TextElement anwenden, z. B. <Text style={{ opacity: 0.5 }}>I'm disabled</Text>- nur zu Ihrer Information
Peter Theill,
46

Mach das einfach

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>
Großer Junge
quelle
<Text>{text}</FontText>? FontText?
JCollum
11
onPress erwartet keinen Booleschen Wert
Fábio Paiva
3

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.

eyal83
quelle
1
Aber das deaktiviert es immer noch nicht. Ändert die Deckkraft bei Berührung einfach nicht.
Jeff P Chacko
1
Sie könnten so etwas wie onPress = {@ someMethod tun, wenn aktiviert}. Auf diese Weise müssen Sie Ihre Ansicht nicht in verschiedene Ansichten oder Touchables einschließen.
eyal83
3

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>
Anja Ishmukhametova
quelle
2

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>
Dänischer Hassan
quelle
0

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

Fomahaut
quelle
0

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
}
})
Cory McAboy
quelle
0

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.

Xdabier
quelle
0

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>
keerthi c
quelle
0

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
  }
Ammar Ismaeel
quelle