Reagieren india zwei Hähnen erfordert Eingabefokus zu ändern, wenn innerhalb Scroll

Question

einfach Scrollview mit mehreren TextInputs Stellen Sie sich vor, wie

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

Als ich das erste Eingabe eingeben, Tastatur öffnet und ich kann Text eingeben. Wenn ich zum zweiten Eingang wechseln möchte, muss ich zweimal tippen - der erste Typ schließt die Tastatur und nur der zweite Tipp öffnet die Tastatur für die zweite Eingabe.

Eine Lösung ist zu verwenden keyboardShouldPersistTaps={true} - Schaltung funktioniert gut, aber dann ist die Tastatur überhaupt nicht geschlossen und die Tastatur kann einige der späteren Eingänge (oder Tasten) abdecken. Ich kann auch keyboardDismissMode verwenden, aber nur die Tastatur beim Ziehen schließen.

Meine Frage ist, wie diese beiden Verhaltensweisen kombiniert werden - IMHO die beste Benutzererfahrung - wenn ich auf einen anderen Eingang klicke, wird der Fokus sofort geändert, ohne die Tastatur wieder zu öffnen und wenn ich irgendwo anders klopfe, wird die Tastatur geschlossen?

I RN0.22 und Beispielanwendung bin mit finden Sie unter https://rnplay.org/apps/kagpGw

UPDATE - Dieses Problem ist in RN 0.40 gelöst worden sein könnte - siehe https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4

Answer 1

Diese SO answer ist nicht genau das, was Sie‘ Sie werden gefragt, aber wird das Fenster automatisch hinter der Tastatur herausziehen, wenn ein TextInput den Fokus hat; Lösen Sie Ihre Tastatur kann einige der späteren Eingaben (oder Tasten) Problem abdecken.

Answer 2

Am Ende habe ich eine Lösung gefunden, die nicht optimal ist (aus Codierungssicht), aber aus der Benutzerperspektive funktioniert. Ich habe kleine Komponente, die anstelle von ScrollView verwendet werden können:

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

Der einzige Nachteil ist, dass I-Knoten Handles erfassen muß alle Text Eingänge „Hand“ und gibt es an die Komponente (wie durch React.findNodeHandle zurück) als eine Anordnung.

Answer 3

löste ich mein Problem mit diesem Code

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

Answer 4

ich die obige Antwort aktualisiert haben, weil die keyboardShouldPersistTaps = {true} veraltet ist und nun die keyboardShouldPersistTaps = 'immer'

verwendet wird

export class InputScrollView extends React.Component { 

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

    render() { 
    return (
     <ScrollView keyboardShouldPersistTaps='always' 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, 
}