ปิดการใช้งานปุ่มบนพื้นเมืองตอบสนอง

ฉันกำลังสร้างแอพ Android โดยใช้การโต้ตอบแบบเนทีฟและฉันใช้ส่วนประกอบ TouchableOpacity เพื่อสร้างปุ่ม
ฉันใช้องค์ประกอบการป้อนข้อความเพื่อยอมรับข้อความจากผู้ใช้และปุ่มควรเปิดใช้งานเมื่อการป้อนข้อความตรงกับสตริงที่กำหนด
ฉันสามารถคิดถึงวิธีการทำสิ่งนี้โดยเริ่มจากการแสดงปุ่มโดยไม่มีตัวห่อ TouchableOpactiy และการเรนเดอร์อีกครั้งด้วย wrapper เมื่อสตริงอินพุตตรงกัน
แต่ฉันเดาว่าจะมีวิธีที่ดีกว่าในการทำเช่นนี้ ใครช่วยได้บ้าง

TouchableOpacityขอบเขตTouchableWithoutFeedbackดังนั้นคุณสามารถใช้disabledคุณสมบัติ:

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

ตอบโต้ Native TouchableWithoutFeedback #disabled เอกสาร

เพิ่งทำสิ่งนี้

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

ดูเหมือนว่าเป็นสิ่งที่สามารถแก้ไขได้โดยใช้ส่วนประกอบคำสั่งซื้อที่สูงขึ้น ฉันอาจจะผิดเพราะฉันพยายามที่จะเข้าใจมันเอง 100% แต่บางทีมันอาจจะเป็นประโยชน์กับคุณ (นี่คือลิงค์คู่)

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

TouchableOpacity activeOpacityได้รับ คุณสามารถทำอะไรเช่นนี้

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

ดังนั้นหากเปิดใช้งานมันจะดูเป็นปกติมิฉะนั้นจะมีลักษณะเหมือนกับที่สัมผัสได้โดยไม่ต้องป้อนกลับ

native-base นี้มีทางออก:

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

ในการปิดใช้งานข้อความคุณต้องตั้งค่าความทึบ: 0 ในรูปแบบข้อความดังนี้:

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

คุณสามารถสร้าง CustButton ด้วยTouchableWithoutFeedbackและตั้งผลและตรรกะที่คุณต้องการด้วยonPressIn, onPressoutหรือวัตถุอื่น ๆ

ฉันสามารถแก้ไขปัญหานี้ได้โดยใส่เงื่อนไขในคุณสมบัติของสไตล์

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

นี่คืองานของฉันสำหรับสิ่งนี้ฉันหวังว่ามันจะช่วย:

<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}]}ฉันจะเพิ่มคุณสมบัติความทึบถ้าปุ่มถูกปิดใช้งาน

คุณสามารถเปิดใช้งานและปิดการใช้งานปุ่มหรือโดยใช้เงื่อนไขหรือโดยตรงตามค่าเริ่มต้นมันจะถูกปิดใช้งาน: จริง

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

ฉันคิดว่าวิธีที่มีประสิทธิภาพมากที่สุดคือการปิดความจุของ touchableOpacity และเพิ่มตัวชี้ prop เหตุการณ์ที่มีสไตล์

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