Reagieren,-Muttersprachler, wie Sie den Bildschirm bewegen, bis auf die textinput -

Habe ich ein Anmeldefenster erstellt mit reagieren-native.

Wie kann ich verlagere mein Bildschirm, wenn der Benutzer die Eingabe in das textInput?

Höre ich das onFocus-Ereignis() und verwenden Sie css-styling, um den Stil der Ansicht?

Wir brauchen mehr Kontext/code hier.
möglich, Duplikat der Wie auto-schieben Sie das Fenster aus hinter der Tastatur, wenn der TextInput-Komponente den Fokus hat?
Sie Mai wollen theck dieser Github Problem. Wir diskutieren, wie dieses Ziel zu erreichen gibt.

InformationsquelleAutor Steve Ng | 2015-05-30

react-native

6

Können Sie ScrollView zur Steuerung Bildschirm nach oben und unten Bewegungen. Solange der Benutzer noch nicht konzentriert jedem TextInput können Sie deaktivieren scrollen. Auf Fokus, nur verschieben sich die scrollview mit Inhalts-Offset prop.
```
<TextInput
    onFocus={this.textInputFocused.bind(this)}
  />

textInputFocused() {
//do your stuff here. scroll screen up
}
```
Hoffe, es hilft!

funktioniert nicht auf Android

InformationsquelleAutor NightFury
10

2017 (RN 0.43) gibt es spezielle Komponente für: KeyboardAvoidingView

funktioniert nicht auf android
es funktioniert, aber mit einigen hacks. Es ist Problem auf GitHub mit Lösungen. Ich benutze dieses: behavior={(Platform.OS === 'ios') ? 'padding' : null}
Art beschissen. Ich würde eher zu implementieren, mit dem Tastatur-Ereignis von mir. also, Sie haben wirklich die Kontrolle über das Verhalten Ihres Layouts
Dezember 2018, es scheint zu funktionieren in Android als auch.

InformationsquelleAutor Aleksandr Mansurov
4

Nacht der Wut, die Antwort ist ziemlich gut, aber würde nicht soviel Aufhebens mit der ScrollView ist contentOffset verwende ich den ScrollResponder:
```
render() {
  return (
    <ScrollView ref="myScrollView">
      <TextInput
        ref="myInput"
        onFocus={this._scrollToInput.bind(this)}
      />
    </ScrollView>
  );
}

_scrollToInput {
  const scrollResponder = this.refs.myScrollView.getScrollResponder();
  const inputHandle = React.findNodeHandle(this.refs.myInput)

  scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
    inputHandle, //The TextInput node handle
    0, //The scroll view's bottom "contentInset" (default 0)
    true //Prevent negative scrolling
  );
}
```
Finden Sie in der Methode definition: scrollResponderScrollNativeHandletokeyboard

Diese Büste auf getScrollResponder ich vermute, dies ist gearbeitet auf eine ältere version der api. Ich benutze scrollTo und codieren Sie die zahlen, die Ihr eine schreckliche Lösung und ich bin halb versucht, um Sie nur webviews für Formular-Seiten.
Es funktioniert gut, um zu bewegen Sie den Bildschirm nach oben, was sollte ich verwenden, um den Bildschirm bewegen wieder nach unten, nachdem beendet die Eingabe?

InformationsquelleAutor Philipp von Weitershausen
1

Diese Paket macht einen Super job, führt eine KeyboardAwareScrollView Komponente, scrollt das Bild in der Ansicht Abgleich der Eingabe mit der Tastatur, dann wieder nach unten scrollen.

InformationsquelleAutor Amr Draz

Und eine andere Lösung, die Arbeit mit RN 0.2, dieses mal anstelle von Quetschungen der Inhalt scrollt.

 inputFocused: function(ref) {
   this._scroll(ref, 75);
 },

 inputBlurred: function(ref) {
   this._scroll(ref, 0);
 },

 _scroll: function(ref, offset) {
   setTimeout(() => {
     var scrollResponder = this.refs.myScrollView.getScrollResponder();
     scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
                React.findNodeHandle(this.refs[ref]),
                offset,
                true
            );
     });
  },

...

render: function() {
  return <View style={{flex: 1}}> 
    <ScrollView ref="myScrollView" keyboardDismissMode='interactive' contentContainerStyle={{flex: 1}}>
      <TextInput
        ref="myInput"
        onFocus={this.inputFocused.bind(this, 'myInput')}
        onBlur={this.inputBlurred.bind(this, 'myInput')} />
    </ScrollView>
  </View>
}

InformationsquelleAutor pomo

Ist es ein Mist zu Schießen, um die nativen keyboard-awareness Funktionalität der ScrollView arbeiten. Für meine Android-app, es funktioniert perfekt in einem Bildschirm, der fast identisch ist wie die anderen, für die funktioniert nicht. Und auf iOS, es funktioniert einfach nicht. Das ist es, was für mich funktioniert:

import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';

this.state = {
    filler: false,
}

componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}

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

_keyboardDidShow() {
    this.setState({filler: true})
    setTimeout(() => this.vertical && this.vertical.scrollToEnd({animated: true}), 0);
}

_keyboardDidHide() {
    this.setState({filler: false})
}


...
return (
  <ScrollView ref={ref => this.vertical = ref}>
    <TextInput/>
    { this.state.filler ? <View style={styles.filler}/> : null }
  </ScrollView>
)

styles.filler = {
    height: 'Keyboard Height'
}

Hinweis: Dies kann nur funktionieren, wenn Ihre <TextInput/> ist an der Unterseite des Bildschirms, die es in meinem Fall war.

verwenden Sie die Pfeiltasten Funktion von es6 zu vermeiden, die bind-Methode stackoverflow.com/questions/32192682/..., Und Sie können auch zu verbessern durch die Umsetzung von "keyboardWillShow" auf iOS. (nicht implementiert auf Android)
Gute Vorschläge. Ich war zu bemerken, dass der Antwort-frame der TextInput, die oberhalb der Tastatur war ein bisschen hinter. Danke!

InformationsquelleAutor Progoogler

0

Versuchen multiline={true} Stütze für den TextInput. Es funktionierte für mich.

InformationsquelleAutor Dror Bar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.