मूल निवासी पर बटन अक्षम करना

Question

मैं मूल निवासी प्रतिक्रिया का उपयोग करके एक एंड्रॉइड ऐप बना रहा हूं और मैंने बटन बनाने के लिए TouchableOpacity घटक का उपयोग किया है।
मैं उपयोगकर्ता से पाठ स्वीकार करने के लिए एक पाठ इनपुट घटक का उपयोग करता हूं और पाठ इनपुट एक निश्चित स्ट्रिंग से मेल खाने के बाद ही बटन को सक्षम किया जाना चाहिए ।
मैं शुरू में TouchableOpactiy आवरण के बिना बटन रेंडर करके और आवरण स्ट्रिंग के साथ एक बार फिर से आवरण के साथ फिर से प्रतिपादन करके ऐसा करने का एक तरीका सोच सकता हूं।
लेकिन मैं अनुमान लगा रहा हूं कि ऐसा करने का एक बेहतर तरीका है। क्या कोई मदद कर सकता है?

Answer 1

TouchableOpacityextents TouchableWithoutFeedback, तो आप बस disabledसंपत्ति का उपयोग कर सकते हैं:

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

रिएक्टिव नेटिव टोलेवॉइटआउटफीडबैक #disabled प्रलेखन

Comments

वैसे आपके पास कुछ भी है जो आपके लिए काम नहीं कर रहा है उस पर एक संकेत दे सकता है? आप RN के किस संस्करण का उपयोग करते हैं? क्या आप हमें कुछ कोड दिखा सकते हैं? आपकी मदद करने के लिए आरएन प्रलेखन के लिए बस एक लिंक: facebook.github.io/react-native/docs/…

— जूलियन डेनियाउ

ध्यान दें कि disabledराज्य बच्चों को प्रदान करने की शैलियों में बदलाव नहीं करता है ताकि उपयोगकर्ताओं को अक्षम अवस्था दिखाई दे सके ताकि आपको Textतत्व पर एक शैली लागू करने की आवश्यकता हो जैसे कि <Text style={{ opacity: 0.5 }}>I'm disabled</Text>- बस एक FYI करें

— पीटर थिल

Answer 2

बस यह करो

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

Comments

<Text>{text}</FontText>? FontText?

— jcollum

onPress एक बूलियन की उम्मीद नहीं कर रहा है

— Fábio Paiva

Answer 3

ऐसा लगता है कि उच्च आदेश घटक का उपयोग करके उस तरह की चीज़ को हल किया जा सकता है। मैं गलत हो सकता है, क्योंकि मैं इसे 100% खुद समझने के लिए संघर्ष कर रहा हूं, लेकिन शायद यह आपके लिए उपयोगी होगा (यहां एक जोड़ी लिंक है ...)

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

Answer 4

TouchableOpacity प्राप्त करता है activeOpacity। आप ऐसा कुछ कर सकते हैं

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

इसलिए यदि यह सक्षम है, तो यह सामान्य दिखाई देगा, अन्यथा, यह केवल touchablewithoutfeedback की तरह दिखेगा।

Comments

लेकिन यह अभी भी इसे अक्षम नहीं करता है। बस स्पर्श पर अस्पष्टता नहीं बदलती है।

— जेफ पी चाको 8

यदि आप सक्षम हैं तो आप onPress = {@ someMethod} जैसा कुछ कर सकते हैं। इस तरह, आपको अपने विचार को अलग-अलग विचारों या स्पर्शों में लपेटना नहीं पड़ेगा।

— eyal83

Answer 5

यह मूल-आधार समाधान है:

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

Answer 6

पाठ को अक्षम करने के लिए आपको अपारदर्शिता निर्धारित करनी होगी: 0 इस तरह से पाठ शैली में:

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

Answer 7

आप के साथ एक CustButton का निर्माण कर सकते हैं TouchableWithoutFeedback, और उस प्रभाव और तर्क को सेट कर सकते हैं जो आप चाहते हैं onPressIn, onPressoutया अन्य सहारा।

Answer 8

मैं शैली की संपत्ति में एक सशर्त डालकर इसे ठीक करने में सक्षम था।

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

Answer 9

यहाँ मेरा काम है इसके लिए मुझे आशा है कि यह मदद करता है:

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

SignUpStyleSheet.inputStyleजब वह अक्षम होता है या नहीं, तब बटन के लिए शैली को पकड़ता है, फिर style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}मैं अपारदर्शिता गुण जोड़ देता हूं यदि बटन अक्षम हो जाता है।

Answer 10

आप बटन को सक्षम और अक्षम कर सकते हैं या शर्त का उपयोग करके या सीधे डिफ़ॉल्ट रूप से यह अक्षम हो जाएगा: सच

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

Answer 11

मुझे लगता है कि सबसे कुशल तरीका एक दृश्य के साथ touchableOpacity को लपेटना और एक शैली की स्थिति के साथ प्रोप पॉइंटरएवेंट्स जोड़ना है।

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

सीएसएस:

buttonDisabled: {
    opacity: 0.7
  }