নেটিভ প্রতিক্রিয়া নেভিগেশন বোতাম অক্ষম করা

Question

আমি দেশীয় প্রতিক্রিয়া ব্যবহার করে একটি অ্যান্ড্রয়েড অ্যাপ্লিকেশন তৈরি করছি এবং বোতামগুলি তৈরি করতে আমি TouchableOpacity উপাদানটি ব্যবহার করেছি।
ব্যবহারকারীর কাছ থেকে পাঠ্য গ্রহণ করতে আমি একটি পাঠ্য ইনপুট উপাদান ব্যবহার করি এবং পাঠ্য ইনপুটটি কোনও নির্দিষ্ট স্ট্রিংয়ের সাথে মেলে তবেই বোতামটি সক্ষম করা উচিত ।
আমি প্রথমে TouchableOpactiy মোড়ক ছাড়াই বোতামটি রেন্ডার করে এবং ইনপুট স্ট্রিং মেলে একবার মোড়কের সাথে পুনরায় রেন্ডারিং করে এটি করার একটি উপায় সম্পর্কে ভাবতে পারি।
তবে আমি অনুমান করছি এটি করার আরও অনেক ভাল উপায় আছে। কেউ সাহায্য করতে পারেন?

Answer 1

TouchableOpacityএক্সটেন্টস TouchableWithoutFeedback, যাতে আপনি কেবল disabledসম্পত্তিটি ব্যবহার করতে পারেন :

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

নেটিভ স্পর্শযোগ্য উইডআউটফিডব্যাক # অক্ষম ডকুমেন্টেশন প্রতিক্রিয়া

Comments

আচ্ছা আপনার কি এমন কিছু আছে যা এটি আপনার পক্ষে কাজ করছে না তার ইঙ্গিত দিতে পারে? আপনি আরএন এর কোন সংস্করণ ব্যবহার করেন? আপনি আমাদের কিছু কোড দেখাতে পারেন? আপনাকে সাহায্যের জন্য আরএন ডকুমেন্টেশনের কেবল একটি লিঙ্ক: ফেসবুক.

— github.io/react-native/docs/…

লক্ষ্য করুন যে disabledরাজ্য শিশুদের রেন্ডারিং শৈলীগুলি পরিবর্তন করে না তাই ব্যবহারকারীদের জন্য অক্ষম রাষ্ট্রটিকে দৃশ্যমান করার জন্য আপনাকে এমন Textউপাদানের জন্য একটি স্টাইল প্রয়োগ করতে হবে যেমন <Text style={{ opacity: 0.5 }}>I'm disabled</Text>- কেবল একটি এফওয়াইআই

— পিটার থেইল

Answer 2

শুধু এই কাজ

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

Comments

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

— jcollum

অনপ্রেস কোনও বুলিয়ান আশা করছে না

— 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

স্পর্শযোগ্যতা গ্রহণ করে activeOpacity। আপনি এরকম কিছু করতে পারেন

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

সুতরাং যদি এটি সক্ষম করা থাকে তবে এটি স্বাভাবিক দেখায়, অন্যথায়, এটি কেবল স্পর্শযোগ্য উইথআউটফিডব্যাকের মতো দেখাবে।

Comments

কিন্তু এটি এখনও এটি অক্ষম করে না। স্পর্শে কেবল অস্বচ্ছতা পরিবর্তন করে না।

— জেফ পি চাকো

আপনি অনপ্রেস = {@ কিছু মেঠোড সক্ষম থাকলে} এর মতো কিছু করতে পারেন} এইভাবে, আপনাকে নিজের দৃষ্টিভঙ্গি বিভিন্ন দর্শন বা স্পর্শযোগ্যগুলিতে গুটিয়ে রাখতে হবে না।

— 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

আমি মনে করি সবচেয়ে কার্যকর উপায় হল একটি দৃশ্যের সাথে স্পর্শযোগ্যযোগ্যতা মোড়ানো এবং স্টাইল শর্তের সাথে প্রোপ পয়েন্টারএভেন্টস যুক্ত করা।

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