React-native, wie Bildschirm auf Textinput verschieben

Question

Ich habe einen Anmeldebildschirm mit reaktiven nativen erstellt.

Wie kann ich meinen Bildschirm nach oben verschieben, wenn der Benutzer den textInput eingibt?

Höre ich das onFocus() -Ereignis und verwende CSS-Styling, um den Stil der Ansicht zu ändern?

Answer 1

Sie können ScrollView verwenden, um Bildschirmbewegungen nach oben und unten zu steuern. Solange der Benutzer keine TextInput fokussiert hat, können Sie disable scroll. Im Fokus schieben Sie einfach den Bildlauf mit Content Offset prop hoch.

<TextInput 
    onFocus={this.textInputFocused.bind(this)} 
    /> 

textInputFocused() { 
//do your stuff here. scroll screen up 
} 

Hoffe es hilft!

Answer 2

Nachtwut Antwort ist ziemlich gut, wenn auch nicht mit dem contentOffset der Scroll Aufheben würde ich die ScrollResponder verwenden würde:

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 
); 
} 

die Methodendefinition Siehe: scrollResponderScrollNativeHandleToKeyboard

Answer 3

Und eine andere Lösung, Arbeits mit RN 0.2, anstatt den Inhalt zu zerquetschen, scrollt es.

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

Answer 4

Diese package hat eine greate Job, führt eine KeyboardAwareScrollView Komponente, die die Sicht auf Anpassung der Eingabe mit der Tastatur scrollt, dann wieder nach unten zu scrollen.

Answer 5

Im Jahr 2017 (RN 0,43) gibt es spezielle Komponente für diesen: KeyboardAvoidingView

Answer 6

Es ist ein Mist zu schießen die native Tastatur Bewusstsein Funktionalität von Scroll zum Laufen zu bringen. Für meine Android-App funktioniert es perfekt in einem Bildschirm, der fast identisch ist wie der andere, der nicht funktioniert. Und auf iOS funktioniert es einfach nicht. Dies ist, 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 Ihr <TextInput/> am unteren Rand des Bildschirms ist, die es in meinem Fall war.