react native - instalar - Deshabilitar botones en reaccionar nativo

react native example

Question

Estoy creando una aplicación de Android usando react native y he usado el componente TouchableOpacity para crear botones.
Utilizo un componente de entrada de texto para aceptar texto del usuario y el botón solo debe habilitarse una vez que la entrada de texto coincida con una cadena determinada.
Puedo pensar en una forma de hacer esto al representar inicialmente el botón sin el contenedor TouchableOpactiy y volver a representar con el contenedor una vez que la cadena de entrada coincide.
Pero supongo que hay una manera mucho mejor de hacer esto. ¿Alguien puede ayudar?

Answer 1

Aquí está mi trabajo para esto, espero que ayude:

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

en SignUpStyleSheet.inputStyle contiene el estilo del botón cuando está deshabilitado o no, luego en style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} Agrego la propiedad de opacidad si el botón está desactivado.

Answer 2

Deshabilite TouchableOpacity usando el siguiente código:

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

Answer 3

Este parece ser el tipo de cosa que podría resolverse utilizando un Componente de orden superior. Sin embargo, podría estar equivocado porque me cuesta entenderlo al 100%, pero tal vez te sea útil (aquí hay un par de enlaces) ...

• 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

Pude solucionar esto poniendo un condicional en la propiedad de estilo.

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 5

Puede crear un CustButton con TouchableWithoutFeedback y establecer el efecto y la lógica que desee con onPressIn , onPressout u otros accesorios.

Answer 6

Puede habilitar y deshabilitar el botón o mediante la condición o directamente de forma predeterminada, se deshabilitará: verdadero

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

Solo haz esto

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

Answer 8

TouchableOpacity recibe activeOpacity . Puedes hacer algo como esto

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

Entonces, si está habilitado, se verá normal, de lo contrario, se verá como tocable sin retroalimentación.

Answer 9

esta base nativa hay solución:

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

Answer 10

TouchableOpacity extiende TouchableWithoutFeedback , por lo que puede usar la propiedad disabled :

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

Reaccionar Native TouchableWithoutFeedback #disabled documentación