首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当TextInput具有焦点时,如何自动将窗口从键盘后面滑出?

当TextInput具有焦点时,如何自动将窗口从键盘后面滑出?
EN

Stack Overflow用户
提问于 2015-03-28 11:12:49
回答 12查看 65K关注 0票数 91

我见过这个本机应用程序自动滚动窗口的技巧,但想知道在React native中做这件事的最好方法……当<TextInput>字段获得焦点并位于视图中的较低位置时,键盘将覆盖文本字段。

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

有谁有好的解决方案吗?

EN

回答 12

Stack Overflow用户

发布于 2016-07-10 06:17:21

Facebook的open sourced KeyboardAvoidingView在react原生0.29中解决了这个问题。文档和用法示例可以在here中找到。

票数 27
EN

Stack Overflow用户

发布于 2015-11-08 01:17:30

我们将一些代码形式的react-native-keyboard-spacer和@Sherlock的代码组合在一起,创建了一个KeyboardHandler组件,该组件可以用TextInput元素包装在任何视图中。真是神来之笔!:-)

代码语言:javascript
复制
/**
 * Handle resizing enclosed View and scrolling to input
 * Usage:
 *    <KeyboardHandler ref='kh' offset={50}>
 *      <View>
 *        ...
 *        <TextInput ref='username'
 *          onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>
 *        ...
 *      </View>
 *    </KeyboardHandler>
 * 
 *  offset is optional and defaults to 34
 *  Any other specified props will be passed on to ScrollView
 */
'use strict';

var React=require('react-native');
var {
  ScrollView,
  View,
  DeviceEventEmitter,
}=React;


var myprops={ 
  offset:34,
}
var KeyboardHandler=React.createClass({
  propTypes:{
    offset: React.PropTypes.number,
  },
  getDefaultProps(){
    return myprops;
  },
  getInitialState(){
    DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
      if (!frames.endCoordinates) return;
      this.setState({keyboardSpace: frames.endCoordinates.height});
    });
    DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
      this.setState({keyboardSpace:0});
    });

    this.scrollviewProps={
      automaticallyAdjustContentInsets:true,
      scrollEventThrottle:200,
    };
    // pass on any props we don't own to ScrollView
    Object.keys(this.props).filter((n)=>{return n!='children'})
    .forEach((e)=>{if(!myprops[e])this.scrollviewProps[e]=this.props[e]});

    return {
      keyboardSpace:0,
    };
  },
  render(){
    return (
      <ScrollView ref='scrollView' {...this.scrollviewProps}>
        {this.props.children}
        <View style={{height:this.state.keyboardSpace}}></View>
      </ScrollView>
    );
  },
  inputFocused(_this,refName){
    setTimeout(()=>{
      let scrollResponder=this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        React.findNodeHandle(_this.refs[refName]),
        this.props.offset, //additionalOffset
        true
      );
    }, 50);
  }
}) // KeyboardHandler

module.exports=KeyboardHandler;
票数 12
EN

Stack Overflow用户

发布于 2016-05-21 23:25:51

react-native-keyboard-aware scroll-view为我解决了这个问题。react-native-keyboard-aware-scroll-view on GitHub

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29313244

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档