React Native: ¿Cómo seleccionar la siguiente entrada de texto después de presionar el botón de teclado "siguiente"?


201

Definí dos campos TextInput de la siguiente manera:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

Pero después de presionar el botón "siguiente" en mi teclado, mi aplicación nativa de reacción no salta al segundo campo TextInput. ¿Cómo puedo lograr eso?

¡Gracias!


La respuesta de Mitch (actualmente la 3ra abajo) funciona para mí en v0.42.
Lawrence

Para las personas con React v16.8.0o superior, recomendaría la respuesta proporcionada por @Eli Johnson en la parte inferior. React ha desaprobado muchos usos de los refproporcionados en las siguientes soluciones.
thedeg123

Respuestas:


331

Ajustar el segundo TextInputenfoque, cuando el anterior TextInput's onSubmitEditingse dispara.

Prueba esto

  1. Agregar una referencia a la segunda entrada de texto
    ref={(input) => { this.secondTextInput = input; }}

  2. Enlace la función de enfoque al primer evento onSubmitEditing de TextInput .
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. Recuerde establecer blurOnSubmit en false, para evitar el parpadeo del teclado.
    blurOnSubmit={false}

Cuando todo esté listo, debería verse así.

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

53
Vale la pena mencionar que esa onSubmitEditingdevolución de llamada se llama después del blurevento. Por lo tanto, el teclado puede volverse loco si se enfoca en el siguiente elemento de inmediato. Por lo tanto, puede ser útil establecer blurOnSubmit={false}todos los elementos en forma, pero dejar en trueel último elemento, para permitir que el botón Listo borre la última entrada.
e1dar

9
Esto ya no funciona, a partir de v0.36. No existe un método de "enfoque" en el componente. ¿Cómo deberíamos hacer esto ahora?
Mitch

44
@Mitch funciona bien en 0.40.0. Podría haber sido un error en la versión que estabas ejecutando.
vikki

3
Usando RN 0.49, agregando blurOnSubmit={false}para evitar el parpadeo del teclado, esto dejó de funcionar, ¿alguien que sepa lo que está sucediendo?
Nabil Londres el

13
Para cualquiera que no haya podido hacer el focustrabajo, asegúrese de no usar un contenedor para el TextInputcomponente. Si tiene un CustomTextInputcomponente de voz que se ajusta TextInput, necesita implementar TextInputmétodos de desenfoque y enfoque para ese componente para que funcione como se esperaba.
Cihad Turhan

65

Puedes hacer esto sin usar referencias . Se prefiere este enfoque, ya que las referencias pueden conducir a un código frágil . Los documentos de React aconsejan encontrar otras soluciones cuando sea posible:

Si no ha programado varias aplicaciones con React, su primera inclinación será tratar de usar referencias para "hacer que las cosas sucedan" en su aplicación. Si este es el caso, tómese un momento y piense más críticamente sobre dónde debe pertenecer el estado en la jerarquía de componentes. A menudo, queda claro que el lugar adecuado para "poseer" ese estado está en un nivel superior en la jerarquía. Colocar el estado allí a menudo elimina cualquier deseo de usar referencias para "hacer que las cosas sucedan"; en cambio, el flujo de datos generalmente logrará su objetivo.

En su lugar, utilizaremos una variable de estado para enfocar el segundo campo de entrada.

  1. Agregue una variable de estado que pasaremos como accesorio a la DescriptionInput :

    initialState() {
      return {
        focusDescriptionInput: false,
      };
    }
  2. Defina un método de controlador que establezca esta variable de estado en verdadero:

    handleTitleInputSubmit() {
      this.setState(focusDescriptionInput: true);
    }
  3. Al enviar / presionar enter / next en el TitleInput, lo llamaremos handleTitleInputSubmit. Esto estableceráfocusDescriptionInput en verdadero.

    <TextInput 
       style = {styles.titleInput}
       returnKeyType = {"next"}
       autoFocus = {true}
       placeholder = "Title" 
       onSubmitEditing={this.handleTitleInputSubmit}
    />
  4. DescriptionInput' focusprop' se establece en nuestra focusDescriptionInputvariable de estado. Entonces, cuando los focusDescriptionInputcambios (en el paso 3), DescriptionInputse volverán a procesar con focus={true}.

    <TextInput
       style = {styles.descriptionInput}          
       multiline = {true}
       maxLength = {200}
       placeholder = "Description" 
       focus={this.state.focusDescriptionInput}
    />

Esta es una buena manera de evitar el uso de referencias, ya que las referencias pueden conducir a un código más frágil :)

EDITAR: h / t a @LaneRettig para señalar que necesitará ajustar React Native TextInput con algunos accesorios y métodos adicionales para que responda focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

2
@LaneRettig Tienes toda la razón, gracias por señalarlo. Envolvemos RN TextInput con algunos accesorios y métodos agregados. Consulte la parte inferior de la respuesta con esas adiciones y avíseme si tiene más problemas.
Stedman Blake

44
Frio. Debe enviar esto como PR a RN. Me sorprende que esto ya no sea compatible de fábrica.
Lane Rettig

8
¿Qué pasa si hace clic en Siguiente en el teclado y luego hace clic directamente en la primera entrada? el enfoque vuelve al segundo, lo cual es una mala experiencia con esa solución
Piotr

3
No me encanta esta solución, en particular porque no se adapta bien a formas incluso un poco más largas de 5-6 elementos, donde necesitarías un estado booleano de enfoque para cada elemento y administrarlos todos en consecuencia.
davidgoli

9
Curiosamente, los documentos también dicen: "Hay algunos buenos casos de uso para las referencias: administrar el enfoque, la selección de texto o la reproducción de medios ..." Entonces, en este caso, usar referencias para enfocar la entrada de texto sería un uso válido de la herramienta .
Noah Allen

26

A partir de React Native 0.36, las llamadas focus()(como se sugiere en varias otras respuestas) en un nodo de entrada de texto ya no son compatibles. En su lugar, puede usar el TextInputStatemódulo de React Native. Creé el siguiente módulo auxiliar para facilitar esto:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

Puede, entonces, llamar a la focusTextInputfunción en cualquier "referencia" de a TextInput. Por ejemplo:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

1
Funciona genial, pero si alguien usa redux-form debería hacer algo como esto. <Field ... onSubmitEditing={() => focusTextInput(this._password)} />y el árbitro debería ser así<Field ... withRef refName={e => this._password = e}/>
tarkanlar

1
Tuve que usar 'onSubmitEditing' para que esto funcionara, pero una gran solución, no obstante.
Adam Jakiela

3
Funciona muy bien en 0.42.
Lawrence

1
@tarkanlar, ¿puedes compartir un fragmento de código para la solución? Parece que no puedo enfocarme cuando uso el campo redux-form, usando solo TextInput funciona, bien
jasan

2
calling focus() on a text input node isn't supported any more=> reclamo en negrita, fuente? Llamando focus()funciona bien con v0.49.5 + TextInputStateno está documentado, mientras que focus()y blur()se mencionan: facebook.github.io/react-native/releases/next/docs/...
tanguy_k

21

Creé una pequeña biblioteca que hace esto, no se necesita ningún cambio de código que no sea reemplazar su vista de ajuste e importar TextInput:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autofocus

Explicado en detalle aquí: https://zach.codes/autofocus-inputs-in-react-native/


Excelente patrón para lograr este resultado. Debe ser la mejor respuesta desde el punto de vista de la facilidad de uso. Parece que puedo editar fácilmente mi FormInput personalizado (extensiones TextInput) para seguir trabajando con sus entradas de Formulario. ¿Te importa si lo incluyo en tu respuesta si por ejemplo?
Jack Robson

¡Por supuesto! Lo sé ... Publiqué esto en la otra publicación popular sobre esto, pero me metí en problemas por duplicados. ¡Solo trato de ayudar porque sé lo molesto que es este problema!
zackify

Esto es genial si tiene un montón de entradas de texto una tras otra, pero si desea agregar estilo entre ellas, se descompone. Gracias por la contribución sin embargo.
GenericJam

Siéntase libre de ajustar el código. Estoy seguro de que podría hacer un camino que omita elementos que no sean entradas de texto. No debería ser demasiado difícil de hacer.
zackify

1
Esto no se construye para la producción RN@0.47.2
Phil Andrews

18

Pensé que compartiría mi solución usando un componente de función ... ¡' esto ' no es necesario!

React 16.12.0 y React Native 0.61.5

Aquí hay un ejemplo de mi componente:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

No sé, espero que esto ayude a alguien =)


1
no funciona. undefined no es objeto de evaluación _this2.ref_input2.current, por favor ayuda
DEEP ADHIYA

¿Puede proporcionar un ejemplo más completo de su código?
Eli Johnson

2
podría ser mejor usar useRef en el componente funcional que createRef
hyuk lee

@hyuklee Usted está en lo cierto, señor, he actualizado ... gracias por el aviso! ¡Salud!
Eli Johnson

Para aquellos que les gusta mantenerse al día con las últimas actualizaciones de reacción, esta es LA RESPUESTA.
Yokhen

13

Usando react-native 0.45.1 también encontré problemas al tratar de establecer el foco en una contraseña TextInput después de presionar la tecla de retorno en un nombre de usuario TextInput.

Después de haber probado la mayoría de las soluciones mejor calificadas aquí en SO, encontré una solución en github que satisfizo mis necesidades: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Para resumirlo:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

Y luego lo uso así:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}

Me salvas la vida
:)

1
Simplemente ha cambiado el nombre refa inputRef... Puede soltar todo su componente personalizado y su segundo bloque de código funcionará tal cual, siempre y cuando vuelva a usarloref
Jason Tolliver

9

Para mí en RN 0.50.3 es posible de esta manera:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

Debes ver esto.PasswordInputRef. _root .focus ()


1
Esto es específico de 'base nativa'
Desarrolpia

8

Si estás usando tcomb-form-nativecomo yo, también puedes hacerlo. Aquí está el truco: en lugar de configurar los accesorios TextInputdirectamente, lo haces a través de options. Puede referirse a los campos del formulario como:

this.refs.form.getComponent('password').refs.input.focus()

Entonces el producto final se ve así:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(Crédito a remcoanker por publicar la idea aquí: https://github.com/gcanti/tcomb-form-native/issues/96 )


¿Cómo llamo a la función onSubmitEditing? por ejemplo: quiero llamar a la función login () cuando el usuario presione el último tipo de tecla de retorno de textinput 'hecho'.
chetan

7

Así lo logré. Y el siguiente ejemplo ha utilizado la API React.createRef () presentada en React 16.3.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

Creo que esto te ayudará.


¿Cuál es el propósito de .current?
Adam Katz

5

Mi escenario es <CustomBoladonesTextInput /> envolviendo un RN <TextInput /> .

Resolví este problema de la siguiente manera:

Mi forma se ve así:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

En la definición del componente CustomBoladonesTextInput, paso el refField al accesorio de referencia interno de esta manera:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

Y voilá. Todo vuelve a funcionar de nuevo. Espero que esto ayude


4

Pruebe esta solución en los problemas de GitHub de React Native.

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

Debe usar el accesorio de referencia para el componente TextInput.
Luego, necesita crear una función que se invoque en onSubmitEditing prop que mueva el foco en la segunda referencia TextInput.

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});

Incluya la información relativa del enlace en su respuesta.
Wes Foster

Tenga en cuenta que las referencias de cadena pueden quedar en desuso, por lo que esta solución puede no funcionar en el futuro: "... Aunque las referencias de cadena no están en desuso, se consideran heredadas y es probable que en algún momento en el futuro sean obsoletas. privilegiado." - facebook.github.io/react/docs/more-about-refs.html
yura

1
Esto ya no funciona, a partir de v0.36. No existe un método de "enfoque" en el componente. ¿Cómo deberíamos hacer esto ahora? ¿Puedes actualizar la respuesta?
Mitch el

@Mitch no está seguro si esto está de vuelta en 0.39.2 pero ahora funciona bien.
Eldelshell

4

Usar referencias de devolución de llamada en lugar de las referencias de cadena heredadas :

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>

1
No funciona ya que el método de enfoque se ha eliminado de TextInput.
Jacob Lauritzen

3
<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

Y agregue el método de la onSubmitEditing={() => this.focusTextInput(this.refs.password)}siguiente manera:

private focusTextInput(node: any) {
    node.focus();
}

2

Para que la solución aceptada funcione si TextInputestá dentro de otro componente, deberá "hacer estallar" la referencia desde refel contenedor principal.

// MyComponent
render() {
    <View>
        <TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
    </View>
}

// MyView
render() {
    <MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
    <MyComponent onRef={(r) => this.myField2 = r}/>
}

1
Hola @Eldelshell, me gustaría lograr lo mismo, pero no pude resolver tu muestra, ¿te importaría mostrarnos una pista?
Seeliang

Creo que esta debería ser la respuesta correcta. Sigo esto y funciona.
David Cheung

¿Están ambos en el mismo archivo?
MoralCode

2

en su componente:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

Nota: Solía ._rootporque es una referencia a TextInput en la entrada NativeBase 'Library'

y en tus entradas de texto como esta

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

2
<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

y agregar método

focusNextField(nextField) {
    this.refs[nextField].focus();
}

Enfoque muy ordenado.
Siraj Alam

1
Respuesta anterior, pero ¿alguien sabe si es posible acceder a todas las referencias como en esta respuesta en un componente funcional (sin estado)?
Douglas Schmidt

1

Hay una manera de capturar pestañas en a TextInput. Es hacky, pero mejor que nada .

Defina un onChangeTextcontrolador que compare el nuevo valor de entrada con el antiguo, buscando un \t. Si encuentra uno, avance el campo como se muestra en @boredgames

Suponiendo que la variable usernamecontiene el valor para el nombre de usuario y setUsernameenvía una acción para cambiarlo en la tienda (estado del componente, tienda redux, etc.), haga algo como esto:

function tabGuard (newValue, oldValue, callback, nextCallback) {
  if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
    callback(oldValue)
    nextCallback()
  } else {
    callback(newValue)
  }
}

class LoginScene {
  focusNextField = (nextField) => {
    this.refs[nextField].focus()
  }

  focusOnPassword = () => {
    this.focusNextField('password')
  }

  handleUsernameChange = (newValue) => {
    const { username } = this.props            // or from wherever
    const { setUsername } = this.props.actions // or from wherever

    tabGuard(newValue, username, setUsername, this.focusOnPassword)
  }

  render () {
    const { username } = this.props

    return (
      <TextInput ref='username'
                 placeholder='Username'
                 autoCapitalize='none'
                 autoCorrect={false}
                 autoFocus
                 keyboardType='email-address'
                 onChangeText={handleUsernameChange}
                 blurOnSubmit={false}
                 onSubmitEditing={focusOnPassword}
                 value={username} />
    )
  }
}

Esto no funcionó para mí usando un teclado físico. El evento onChangeText no se activa en la pestaña.
Bufke

0

Aquí una solución de reactivo para un componente de entrada que tiene una propiedad: focus.

El campo se enfocará mientras este accesorio esté establecido en verdadero y no tendrá foco mientras sea falso.

Desafortunadamente, este componente necesita tener un: ref definido, no pude encontrar otra forma de llamar a .focus () en él. Estoy contento con las sugerencias.

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5


@Bap: este es Clojurescript. El reactivo es un enlace para reaccionar. Si tiene curiosidad, es una gran combinación para React si está listo para un ceceo ya que las actualizaciones con estado generalmente solo son posibles con cosas como una llamada explícita a swap!un atomtipo. Según los documentos, esto se usa para vincular a React: "Cualquier componente que use un átomo se vuelve a representar automáticamente cuando cambia su valor". reagent-project.github.io
Del

0

Si está utilizando NativeBase como componentes de la interfaz de usuario, puede usar este ejemplo

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.