react-native – 当TextInput具有焦点时,如何从键盘后面自动滑出
发布时间:2020-12-15 07:13:06 所属栏目:百科 来源:网络整理
导读:我已经看到这个黑客为本机应用程序自动滚动窗口,但想知道做最好的方式做反应本机…当一个字段获得焦点和位置低在视图中,键盘将掩盖文本字段。您可以在示例UIExplorer的TextInputExample.js视图中看到此问题。任何一个有好的解决方案? 在react-native中执
我已经看到这个黑客为本机应用程序自动滚动窗口,但想知道做最好的方式做反应本机…当一个字段获得焦点和位置低在视图中,键盘将掩盖文本字段。您可以在示例UIExplorer的TextInputExample.js视图中看到此问题。任何一个有好的解决方案?
在react-native中执行此操作的正确方法不需要外部库,利用本机代码,并包括动画。
首先定义一个函数,它将处理每个TextInput(或任何其他要滚动到的组件)的onFocus事件: // Scroll a component into view. Just pass the component ref string. inputFocused (refName) { setTimeout(() => { let scrollResponder = this.refs.scrollView.getScrollResponder(); scrollResponder.scrollResponderScrollNativeHandleToKeyboard( React.findNodeHandle(this.refs[refName]),110,//additionalOffset true ); },50); } 然后,在你的渲染函数: render () { return ( <ScrollView ref='scrollView'> <TextInput ref='username' onFocus={this.inputFocused.bind(this,'username')} </ScrollView> ) } 这使用RCTDeviceEventEmitter用于键盘事件和大小调整,使用RCTUIManager.measureLayout测量组件的位置,并计算scrollResponderInputMeasureAndScrollToKeyboard中所需的确切滚动移动。 您可能想要使用additionalOffset参数,以适应您的特定UI设计的需要。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |