Отключение кнопок на

Я создаю приложение для Android, использующее реакцию native, и я использовал компонент TouchableOpacity для создания кнопок.
Я использую компонент ввода текста, чтобы принять текст от пользователя, а кнопка должна быть включена, только если текстовый ввод соответствует определенной строке.
Я могу придумать, как это сделать, сначала отринув кнопку без обложки TouchableOpactiy и повторного рендеринга с помощью оболочки после соответствия строки ввода.
Но я предполагаю, что есть намного лучший способ сделать это. Может ли кто-нибудь помочь?

Ответ 1

TouchableOpacity экстенты TouchableWithoutFeedback, поэтому вы можете просто использовать свойство disabled:

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

Реагировать на Native TouchableWithoutFeedback #disabled документацию

Ответ 2

Просто сделайте это

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

Ответ 3

Это похоже на то, что можно решить с помощью компонента более высокого порядка. Я мог ошибаться, потому что я изо всех сил пытаюсь понять это на 100%, но, возможно, это будет полезно для вас (здесь пара ссылок)...

Ответ 4

TouchableOpacity получает activeOpacity. Вы можете сделать что-то вроде этого

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

Итак, если он включен, он будет выглядеть нормально, иначе он будет выглядеть так же, как touchablewithoutfeedback.

Ответ 5

Вы можете создать CustButton с TouchableWithoutFeedback и установить необходимый эффект и логику с помощью onPressIn, onPressout или другого реквизит.

Ответ 6

Я смог исправить это, поместив условие в свойство 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
}
})

Ответ 7

это родная база есть решение:

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

Ответ 8

Отключите TouchableOpacity используя следующий код:

<TouchableOpacity disabled={true}>
  <Text>Submit</Text>
</TouchableOpacity>

Ответ 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}]} style={this.state.validity? SignUpStyleSheet.inputStyle: [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} Я добавляю свойство непрозрачности, если кнопка отключена.

Ответ 10

Вы можете включить и отключить кнопку, либо с помощью условия, либо напрямую по умолчанию это будет отключено: 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>

Ответ 11

Удобнее по этой ссылке и легко объяснение https://github.com/Awadhesh786/ReactNativeExample/blob/master/src/screen/Buttons.js проверьте больше типов кнопок

Ответ 12

Я думаю, что наиболее эффективный способ - обернуть touchableOpacity видом и добавить prop pointerEvents с условием стиля.

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