TextInput被键盘遮挡 怎么解决这个问题



  • TextInput被键盘遮挡 怎么解决这个问题?
    有比较方便的解决方法么?现在我是加了一个动画,是针对有scrollview的,
    但是 我放置在一个页面最低度的输入框,给它加动画,就不行了,不起作用,查了资料,说是应该设置绝对位置,但是按着设置了 还是么有作用.求大神解决.



  • @XGPass 我用的是 "react-native-keyboard-spacer": "^0.1.3",
    这个你试试



  • @zcgong 谢谢 挺不错的插件:smile: ,解决了我的问题,就是不知道用在scrollview的TextInput 效果如何?



  • @XGPass 可以试试 我没在scrollview中试过



  • RN开发社区已经在处理这个问题了。现在Android平台已经没有这个问题了。iOS上自己解决也只是时间问题。所以现在只要用最简单的办法应付下就行,比较把整个View上移一下。



  • import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';

    var SampleApp = React.createClass({
    getInitialState:function(){
    return {keyboardSpace:0};
    },
    componentDidMount:function(){
      RCTDeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace.bind(this));
      RCTDeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace.bind(this));
    },
    componentWillUnmount:function() {
      RCTDeviceEventEmitter.removeAllListeners('keyboardWillShow')
      RCTDeviceEventEmitter.removeAllListeners('keyboardWillHide')
    },
    updateKeyboardSpace:function(frames){
    const keyboardSpace = frames.endCoordinates.height//获取键盘高度

    this.setState({
      keyboardSpace: keyboardSpace,
    })
    },
     resetKeyboardSpace:function(){
             this.setState({
    

    keyboardSpace: 0,
      });

     }, 
    

    使用以上方式得到软键盘高度,然后设置ScrollView的contentInset下边高度。就能实现了。



  • 谢谢大家的回答,我用之前纯iOS代码开发时候的一个解决此方法的第三方:IQKeyboardManager,比较完美的解决了这个问题,有同样问题的可以看看 http://blog.csdn.net/syg90178aw/article/details/50986997


登录后回复