当TextInput具有焦点时，如何从键盘后面自动滑动窗口？

Question

我已经见过针对本机应用程序自动滚动窗口的一种技巧，但我想知道在React Native中实现此目的的最佳方法...当某个<TextInput>字段获得焦点并且在视图中位于较低位置时，键盘将覆盖文本字段。

您可以在示例UIExplorer的TextInputExample.js视图中看到此问题。

有没有人有一个好的解决方案？

Answer 1

这KeyboardAvoidingView可能是现在最好的方法。在此处查看文档。与Keyboard提供开发人员更多控制权以执行动画的模块相比，它确实非常简单。斯宾塞·卡利（Spencer Carli）在他的中型博客上展示了所有可能的方式。2015年答案这样做的正确方法react-native不需要外部库，可以利用本机代码并包含动画。首先定义一个函数，该函数将处理onFocus每个事件TextInput（或您要滚动到的任何其他组件）的事件：// Scroll a component into view. Just pass the component ref string.inputFocused (refName) {&nbsp; setTimeout(() => {&nbsp; &nbsp; let scrollResponder = this.refs.scrollView.getScrollResponder();&nbsp; &nbsp; scrollResponder.scrollResponderScrollNativeHandleToKeyboard(&nbsp; &nbsp; &nbsp; React.findNodeHandle(this.refs[refName]),&nbsp; &nbsp; &nbsp; 110, //additionalOffset&nbsp; &nbsp; &nbsp; true&nbsp; &nbsp; );&nbsp; }, 50);}然后，在您的渲染函数中：render () {&nbsp; return (&nbsp; &nbsp; <ScrollView ref='scrollView'>&nbsp; &nbsp; &nbsp; &nbsp; <TextInput ref='username'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onFocus={this.inputFocused.bind(this, 'username')}&nbsp; &nbsp; </ScrollView>&nbsp; )}这将RCTDeviceEventEmitter用于键盘事件和大小调整，使用来测量组件的位置RCTUIManager.measureLayout，并计算中所需的确切滚动移动scrollResponderInputMeasureAndScrollToKeyboard。您可能需要试一试该additionalOffset参数，以适合您特定的UI设计的需求。

Answer 2

我们结合了一些代码形式react-native-keyboard-spacer和@Sherlock中的代码，以创建一个KeyboardHandler组件，该组件可以包装在带有TextInput元素的任何View周围。奇迹般有效！:-)/**&nbsp;* Handle resizing enclosed View and scrolling to input&nbsp;* Usage:&nbsp;*&nbsp; &nbsp; <KeyboardHandler ref='kh' offset={50}>&nbsp;*&nbsp; &nbsp; &nbsp; <View>&nbsp;*&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp;*&nbsp; &nbsp; &nbsp; &nbsp; <TextInput ref='username'&nbsp;*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>&nbsp;*&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp;*&nbsp; &nbsp; &nbsp; </View>&nbsp;*&nbsp; &nbsp; </KeyboardHandler>&nbsp;*&nbsp;&nbsp;*&nbsp; offset is optional and defaults to 34&nbsp;*&nbsp; Any other specified props will be passed on to ScrollView&nbsp;*/'use strict';var React=require('react-native');var {&nbsp; ScrollView,&nbsp; View,&nbsp; DeviceEventEmitter,}=React;var myprops={&nbsp;&nbsp; offset:34,}var KeyboardHandler=React.createClass({&nbsp; propTypes:{&nbsp; &nbsp; offset: React.PropTypes.number,&nbsp; },&nbsp; getDefaultProps(){&nbsp; &nbsp; return myprops;&nbsp; },&nbsp; getInitialState(){&nbsp; &nbsp; DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{&nbsp; &nbsp; &nbsp; if (!frames.endCoordinates) return;&nbsp; &nbsp; &nbsp; this.setState({keyboardSpace: frames.endCoordinates.height});&nbsp; &nbsp; });&nbsp; &nbsp; DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{&nbsp; &nbsp; &nbsp; this.setState({keyboardSpace:0});&nbsp; &nbsp; });&nbsp; &nbsp; this.scrollviewProps={&nbsp; &nbsp; &nbsp; automaticallyAdjustContentInsets:true,&nbsp; &nbsp; &nbsp; scrollEventThrottle:200,&nbsp; &nbsp; };&nbsp; &nbsp; // pass on any props we don't own to ScrollView&nbsp; &nbsp; Object.keys(this.props).filter((n)=>{return n!='children'})&nbsp; &nbsp; .forEach((e)=>{if(!myprops[e])this.scrollviewProps[e]=this.props[e]});&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; keyboardSpace:0,&nbsp; &nbsp; };&nbsp; },&nbsp; render(){&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <ScrollView ref='scrollView' {...this.scrollviewProps}>&nbsp; &nbsp; &nbsp; &nbsp; {this.props.children}&nbsp; &nbsp; &nbsp; &nbsp; <View style={{height:this.state.keyboardSpace}}></View>&nbsp; &nbsp; &nbsp; </ScrollView>&nbsp; &nbsp; );&nbsp; },&nbsp; inputFocused(_this,refName){&nbsp; &nbsp; setTimeout(()=>{&nbsp; &nbsp; &nbsp; let scrollResponder=this.refs.scrollView.getScrollResponder();&nbsp; &nbsp; &nbsp; scrollResponder.scrollResponderScrollNativeHandleToKeyboard(&nbsp; &nbsp; &nbsp; &nbsp; React.findNodeHandle(_this.refs[refName]),&nbsp; &nbsp; &nbsp; &nbsp; this.props.offset, //additionalOffset&nbsp; &nbsp; &nbsp; &nbsp; true&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }, 50);&nbsp; }}) // KeyboardHandlermodule.exports=KeyboardHandler;