React-native, как перемещать экран вверх по textinput

Question

У меня есть экран входа в систему, созданный с использованием реакции-native.

Как сменить экран, когда пользователь вводит текст в текстовом поле?

Я слушаю событие onFocus() и использую стиль css, чтобы изменить стиль представления?

Answer 1

Вы можете использовать ScrollView для управления движениями вверх и вниз. Пока пользователь не сфокусировал TextInput, вы можете disable scroll. В фокусе просто сдвиньте прокрутку с помощью Content Offset.

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

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

Надеюсь, это поможет!

Answer 2

ответ Night Фьюри довольно хорошо, хотя и не суетиться с ScrollView-х contentOffset, я бы использовал 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 
); 
} 

См определение метода: scrollResponderScrollNativeHandleToKeyboard

Answer 3

И еще одно решение, работая с RN 0.2, на этот раз вместо раздачи содержимого, которое он прокручивает.

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

Это package делает Greate работу, вводит компонент KeyboardAwareScrollView, который прокручивает вид на соответствие ввода с клавиатуры, то прокрутка вниз.

Answer 5

В 2017 году (РН 0,43) есть специальный компонент для этого: KeyboardAvoidingView

Answer 6

Это дерьмо стрелять, чтобы получить базовую функциональность осведомленности клавиатуры ScrollView работает. Для моего Android-приложения он отлично работает на одном экране, который почти идентичен другому, для которого не работает. И на iOS это просто не работает. Это то, что работает для меня:

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

Примечание: Это может работать только тогда, когда ваш <TextInput/> находится в нижней части экрана, который это было в моем случае.