Vô hiệu hóa các nút trên phản ứng tự nhiên

Tôi đang tạo một ứng dụng Android bằng phản ứng gốc và tôi đã sử dụng thành phần TouchableOpacity để tạo các nút.
Tôi sử dụng một thành phần nhập văn bản để chấp nhận văn bản từ người dùng và nút chỉ nên được bật khi đầu vào văn bản khớp với một chuỗi nhất định.
Tôi có thể nghĩ ra một cách để làm điều này bằng cách ban đầu hiển thị nút mà không có trình bao bọc TouchableOpactiy và kết xuất lại với trình bao bọc sau khi chuỗi đầu vào khớp.
Nhưng tôi đoán có một cách tốt hơn để làm điều này. Có ai giúp được không?

TouchableOpacityphạm vi TouchableWithoutFeedback, vì vậy bạn chỉ có thể sử dụng disabledtài sản:

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

React Native TouchableWithoutFeedback #disables

Chỉ cần làm điều này

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

Điều này có vẻ như là điều có thể được giải quyết bằng cách sử dụng Thành phần bậc cao. Mặc dù tôi có thể sai vì tôi đang cố gắng tự hiểu 100%, nhưng có lẽ nó sẽ hữu ích cho bạn (đây là một vài liên kết) ...

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

TouchableOpacity nhận được activeOpacity. Bạn có thể làm một cái gì đó như thế này

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

Vì vậy, nếu nó được kích hoạt, nó sẽ trông bình thường, nếu không, nó sẽ trông giống như touchablewithoutfeedback.

cơ sở bản địa này có giải pháp:

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

Để tắt Văn bản, bạn phải đặt độ mờ: 0 theo kiểu Văn bản như sau:

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

Bạn có thể xây dựng một CustButton với TouchableWithoutFeedback, và thiết lập các hiệu ứng và logic bạn muốn với onPressIn, onPressouthoặc đạo cụ khác.

Tôi đã có thể khắc phục điều này bằng cách đặt một điều kiện trong thuộc tính kiểu.

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

Đây là công việc của tôi cho việc này, tôi hy vọng nó sẽ giúp:

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

trong SignUpStyleSheet.inputStylegiữ kiểu cho nút khi nó bị vô hiệu hóa hay không, sau đó trong style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}tôi thêm thuộc tính độ mờ nếu nút bị tắt.

Bạn có thể bật và tắt nút hoặc bằng cách sử dụng điều kiện hoặc trực tiếp theo mặc định, nó sẽ bị vô hiệu hóa: 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>

Tôi nghĩ rằng cách hiệu quả nhất là bọc một touchableOpacity bằng một khung nhìn và thêm con trỏ propEvents với một điều kiện kiểu.

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