React native üzerindeki düğmeleri devre dışı bırakma

React native kullanarak bir android uygulaması yapıyorum ve düğmeler oluşturmak için TouchableOpacity bileşenini kullandım.
Kullanıcıdan gelen metni kabul etmek için bir metin girişi bileşeni kullanıyorum ve düğme yalnızca metin girişi belirli bir dizeyle eşleştiğinde etkinleştirilmelidir .
Başlangıçta düğmeyi TouchableOpactiy sarmalayıcısı olmadan oluşturarak ve giriş dizesi eşleştiğinde sarmalayıcıyla yeniden oluşturarak bunu yapmanın bir yolunu düşünebilirim.
Ama bunu yapmanın çok daha iyi bir yolu olduğunu tahmin ediyorum. Biri yardım edebilir mi?

TouchableOpacitykapsamları TouchableWithoutFeedback, böylece disabledözelliği kullanabilirsiniz :

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

Geribildirim Olmadan Yerel Dokunulabilir React # devre dışı dokümantasyon

Yeni Pressable API'nin de bir disabledseçeneği vardır :

<Pressable disable={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>

Sadece bunu yap

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

Bu, bir Yüksek Dereceli Bileşen kullanılarak çözülebilecek türden bir şey gibi görünüyor. Yine de yanılıyor olabilirim çünkü bunu% 100 kendim anlamakta zorlanıyorum, ama belki size yardımcı olacaktır (işte birkaç bağlantı) ...

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

bu yerel tabanda bir çözüm var:

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

TouchableOpacity alır activeOpacity. Bunun gibi bir şey yapabilirsin

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

Yani etkinleştirilirse normal görünecek, aksi takdirde geri bildirim olmadan dokunulabilir gibi görünecektir.

Metni devre dışı bırakmak için opaklığı şu şekilde ayarlamanız gerekir: Metin stilinde 0:

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

Bence en verimli yol touchableOpacity'yi bir görünümle sarmak ve prop pointerEvents'i bir stil koşuluyla eklemek.

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

Sen bir CustButton inşa edebilirsiniz TouchableWithoutFeedbackve etkisini ve ile istediğiniz mantığı set onPressIn, onPressoutya da diğer sahne.

Bunu, stil özelliğine bir koşullu koyarak düzeltebildim.

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

İşte bunun için çalışmam, umarım yardımcı olur:

<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.inputStyle, devre dışı bırakıldığında veya olmadığında düğmenin stilini tutar, ardından style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}düğme devre dışıysa opaklık özelliğini eklerim.

Düğmeyi etkinleştirebilir ve devre dışı bırakabilirsiniz veya koşulu kullanarak veya doğrudan varsayılan olarak devre dışı bırakılır: 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>