Botón de React Native encima del teclado

Este dilema se puede abordar de variadas formas, pero te damos la solución más completa en nuestra opinión.

Solución:

Para teclado numérico y numérico:

y parece que no necesitas ninguna biblioteca
returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1

para el teclado normal, puede mirar esto:

https://github.com/ardaogulcan/react-native-keyboard-accessory

y

https://github.com/douglasjunior/react-native-keyboard-manager

Hilo de Github que necesita para echar un vistazo a:

https://github.com/facebook/react-native/issues/1190

y

https://github.com/facebook/react-native/issues/641

Espero eso ayude

Puede usar el componente KeyboardAvoidingView de React-native como

//View you want to be moved up when keyboard shows.


keyboardVerticalOffset=50

es el margen entre el teclado y la vista, que será la altura de vista o botón que quieras. Espero que eso ayude.

Editar: creo que la mejor y más personalizable forma de hacer esto es escuchar los eventos del teclado y cambiar la posición absoluta del componente que desea sobre el teclado, de acuerdo con él.

import ..,Keyboard from "react-native";

componentDidMount () 

        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',(event)=>this.keyboardDidShow(event) );
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',(event)=>this.keyboardDidHide(event) );
      

      keyboardDidShow = (event) => 
        //   console.log("keyboard show",event)

            this.setState(keyboardShow:true,keyboardHeight:event.endCoordinates.height) //< 
        // console.log("keyboard hide",event)
        this.setState(keyboardShow:false,keyboardHeight:0)
    

      componentWillUnmount () 
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
      

ahora, para mostrarlo arriba del teclado, puede darle estilo a su componente de botón como este

style=position:"absolute",bottom:this.state.keyboardHeight+20,right:0

y si desea ocultarlo (botón Listo), simplemente condicione el JSX con el estado KeyboardShow.

Sección de Reseñas y Valoraciones

Si guardas algún contrariedad y disposición de aumentar nuestro ensayo te inspiramos realizar una explicación y con gusto lo ojearemos.

---

---

Utiliza Nuestro Buscador