React-native如何在文本输入上移动屏幕

Question

我有一个使用react-native创建的登录屏幕。

如何在用户输入textInput时将屏幕向上移动？

我是否在听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

夜煞的答案是相当不错的，虽然不会与滚动型的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做了马丽娟的工作，介绍了滚动视图了输入与键盘相匹配，然后滚动回下来KeyboardAwareScrollView组件。

Answer 5

在2017年（RN 0.43）有特殊的组件此：KeyboardAvoidingView

Answer 6

这是一个废话拍摄得到的滚动型工作的原生键盘意识的功能。对于我的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/>是它是在我的情况下，屏幕的底部，这可能只是工作。