React Native wymaga dwóch kurków do zmiany sygnału wejściowego ostrość, gdy w ciągu Scrollview

Question

Wyobraźmy sobie prostą Scrollview z wieloma TextInputs jak

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

Kiedy wprowadzić pierwsze wejście, klawiatura otwiera i mogę wpisać tekst. Kiedy chcę zmienić na drugie wejście, muszę dwukrotnie nacisnąć - pierwszy typ zamyka klawiaturę, a tylko drugie naciśnięcie otwiera klawiaturę dla drugiego wejścia.

Jednym z rozwiązań jest użycie keyboardShouldPersistTaps={true} - przełączanie działa dobrze, ale klawiatura wcale nie jest zamknięta, a klawiatura może obejmować niektóre z późniejszych wejść (lub przycisków). Mogę również użyć keyboardDismissMode, jednak po prostu przeciągnij klawiaturę.

Moje pytanie brzmi, jak połączyć te dwa zachowania - w IMHO z najlepszą obsługą użytkownika - gdy kliknę inne wejście, fokus zostanie natychmiast zmieniony bez ponownego otwierania klawiatury, a kiedy kliknę gdzieś indziej, klawiatura zostanie zamknięta?

Używam RN0.22 oraz przykładową aplikację jest dostępny w https://rnplay.org/apps/kagpGw

UPDATE - Ten problem może zostały rozwiązane w RN 0,40 - patrz https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4

Answer 1

SO answer

To nie jest dokładnie to, czego” prosić o, ale automatycznie przesunie okno zza klawiatury, gdy TextInput ma fokus; Rozwiązywanie problemów z klawiaturą może obejmować niektóre z późniejszych wejść (lub przycisków) o numerze.

Answer 2

Na koniec znalazłem rozwiązanie, które nie jest optymalne (z perspektywy kodowania), ale działa z perspektywy użytkownika. I wykonany mały element, który może być stosowany zamiast 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, 
} 

Jedyną wadą jest to, że potrzebne do zbierania uchwyty węzła (zwracanej przez React.findNodeHandle) wszystkich wprowadzania tekstu „ręcznie” i przechodzi do składnika jako tablica.

Answer 3

mi rozwiązać mój problem z tym kodem

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

Answer 4

I zostały zaktualizowane powyższą odpowiedź, ponieważ keyboardShouldPersistTaps = {true} jest przestarzała i teraz keyboardShouldPersistTaps = 'zawsze' służy

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