reactjs - gifted - style component react native

React Native requiere dos toques para cambiar el foco de entrada cuando está dentro de scrollview

Question

Imagine Simple ScrollView con múltiples TextInputs como

  <ScrollView style={styles.container}>
    <TextInput style={styles.input} />
    <TextInput style={styles.input} />
  </ScrollView>

Cuando ingreso la primera entrada, el teclado se abre y puedo escribir texto. Cuando quiero cambiar a una segunda entrada, necesito tocar dos veces: el primer tipo cierra el teclado y solo el segundo toque abre el teclado para la segunda entrada.

Una solución es usar keyboardShouldPersistTaps={true} - el cambio funciona bien, pero el teclado no se cierra y el teclado puede cubrir algunas de las entradas (o botones) posteriores. También puedo usar keyboardDismissMode pero solo cierre el teclado al arrastrar.

Mi pregunta es cómo combinar esos dos comportamientos - en mi humilde opinión la mejor experiencia de usuario - cuando hago clic en otra entrada, el foco cambia inmediatamente sin volver a abrir el teclado y cuando toco en otro lugar, el teclado está cerrado.

Estoy usando RN0.22 y la aplicación de muestra está disponible en https://rnplay.org/apps/kagpGw

ACTUALIZACIÓN - Este problema podría haberse resuelto en RN 0.40 - ver https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4

Answer 1

Al final encontré una solución que no es óptima (desde la perspectiva de la codificación) pero funciona desde la perspectiva del usuario. Hice un pequeño componente que se puede usar en lugar de ScrollView :

export class InputScrollView extends React.Component {

  constructor(props, ctx) {
      super(props, ctx);
      this.handleCapture = this.handleCapture.bind(this);
  }

  render() {
    return (
      <ScrollView keyboardShouldPersistTaps={true} keyboardDismissMode=''on-drag''>
        <View onStartShouldSetResponderCapture={this.handleCapture}>
          {this.props.children}
        </View>
      </ScrollView>
    );
  }

  handleCapture(e) {
    const focusField = TextInputState.currentlyFocusedField();
    const target = e.nativeEvent.target;
    if (focusField != null && target != focusField){
      const inputs = this.props.inputs;
      if (inputs && inputs.indexOf(target) === -1) {
        dismissKeyboard();
      }
    }
  }
}

InputScrollView.propTypes = {
  inputs : React.PropTypes.array,
}

El único inconveniente es que necesito recolectar identificadores de nodos (como los devuelve React.findNodeHandle ) de todas las entradas de texto "manualmente" y pasarlas al componente como una matriz.

Answer 2

Solucioné mi problema con este código

<ScrollView
   keyboardDismissMode=''on-drag''
   keyboardShouldPersistTaps={true}
>

Answer 3

Esta respuesta SO no es exactamente lo que estás pidiendo, pero deslizará automáticamente la ventana desde detrás del teclado cuando un TextInput tiene foco; resolver su teclado puede cubrir algunos de los problemas posteriores de entradas (o botones) .