Menonaktifkan tombol pada reaksi asli

Saya membuat aplikasi android menggunakan reaksi asli dan saya telah menggunakan komponen TouchableOpacity untuk membuat tombol.
Saya menggunakan komponen input teks untuk menerima teks dari pengguna dan tombol hanya boleh diaktifkan setelah input teks cocok dengan string tertentu.
Saya bisa memikirkan cara untuk melakukan ini dengan awalnya rendering tombol tanpa pembungkus TouchableOpactiy dan rendering ulang dengan pembungkus setelah string input cocok.
Tapi saya kira ada cara yang lebih baik untuk melakukan ini. Adakah yang bisa membantu?

TouchableOpacityluasan TouchableWithoutFeedback, jadi Anda bisa menggunakan disabledproperti:

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

React Native TouchableWithoutFeedback #disabled dokumentasi

Lakukan saja ini

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

Ini sepertinya jenis hal yang dapat dipecahkan menggunakan Komponen Orde Tinggi. Saya bisa saja salah karena saya berjuang untuk memahaminya 100% sendiri, tapi mungkin itu akan membantu Anda (berikut beberapa tautan) ...

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

TouchableOpacity menerima activeOpacity. Anda dapat melakukan sesuatu seperti ini

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

Jadi jika diaktifkan, itu akan terlihat normal, jika tidak, itu akan terlihat seperti disentuh tanpa umpan balik.

pangkalan asli ini ada solusinya:

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

Untuk menonaktifkan Teks, Anda harus mengatur opacity: 0 dalam gaya Teks seperti ini:

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

Anda dapat membangun CustButton dengan TouchableWithoutFeedback, dan mengatur efek dan logika yang Anda inginkan onPressIn, onPressoutatau alat peraga lainnya.

Saya dapat memperbaikinya dengan meletakkan kondisional pada properti style.

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

Inilah pekerjaan saya untuk ini, saya harap ini membantu:

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

di SignUpStyleSheet.inputStyletahan gaya untuk tombol ketika dinonaktifkan atau tidak, maka di style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}saya menambahkan properti opacity jika tombol dinonaktifkan.

Anda dapat mengaktifkan dan menonaktifkan tombol atau dengan menggunakan kondisi atau secara langsung secara default itu akan menonaktifkan: 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>

Saya pikir cara yang paling efisien adalah dengan membungkus touchableOpacity dengan tampilan dan menambahkan prop pointerEvents dengan kondisi gaya.

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