React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。

原创 2017年03月24日 15:31:29

React Native 处理软件盘弹出和收回。


现在是有这样一个需求,就是,在TextInput中输入文本 ,会弹出软件盘 ,但是 ,当我点击空白处,软件盘却不退出,我想点击其他空白处,软件盘隐藏,怎么做了。软件盘之所以不能退出,是因为 输入的时候,当你输入完毕后,焦点还在这个输入框中,你只能点击其他能获取焦点的控件,这个焦点才能转移,但是焦点不会消失,在TextInput中没有处理怎样设置失去焦点的方法。


我设想的方式是,在空白处使用一个TouchableWithoutFeedback 这个控件 ,在onPress方法中,关闭软键盘 ,这样就相当于触摸空白处隐藏软件盘 ,暂时还没有想到其他的好办法,或许有这样的方法,只是我没有看到。


我这个应用要处理的是在登陆页面,输入用户名和密码。

在布局的空白处使用TouchableWithoutFeedback

<TouchableWithoutFeedback
          onPress={this.lostBlur.bind(this)}>

          <View style={styles.kong}>
              <Text>
                {/* 目的是点击空白处,退出软键盘 */}
              </Text>
          </View>

</TouchableWithoutFeedback>

监听软件盘的弹出和隐藏

componentWillMount这个方法是在render渲染之前调用,只调用一次,componentWillUnmount这个方法在销毁的时候调用。移出软件盘。

  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
      keyBoardIsShow = true;
  }

  _keyboardDidHide () {
      keyBoardIsShow = true;
  }


在点击onPress后隐藏软件盘。

  lostBlur(){
      //退出软件盘
      if (keyBoardIsShow) {
         Keyboard.dismiss();
      }
  }



react-native里TextInput遇到的一些问题及解决方案

转载自:http://www.07net01.com/2015/10/944827.html 如有侵犯,请来信oiken@qq.com 最近在用react-native做页面,遇到...
  • oiken
  • oiken
  • 2015年12月11日 22:59
  • 4216

React-Native学习之 图片做背景 modal 点击其他区域消失

1.modal点击其他区域消失 this.setState({showTopMenu:false})}> style={{position: 'absolute',left: 0,righ...
  • jing85432373
  • jing85432373
  • 2017年02月13日 11:31
  • 1364

《React-Native系列》33、 键盘遮挡问题处理

最近在项目中,使用TextInput组件的时候,发现键盘弹出的时候,遮盖了表单。咨询了下做iOS的同学,他们的处理是计算键盘的高度和当前输入域的位置,将界面向上移动一段距离。那在ReactNative...
  • hsbirenjie
  • hsbirenjie
  • 2016年09月23日 21:08
  • 10124

React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

只关注括号内问题的同学,可直接跳转到蓝字部分。(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件...
  • gxf_ming
  • gxf_ming
  • 2017年03月17日 10:46
  • 491

React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决

Bug情况描述:React Native项目中,点击按钮A出现弹框浮层,弹框中需要TextInput输入数字,键盘浮起来;这时候点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有触发 取消...
  • SpicyBoiledFish
  • SpicyBoiledFish
  • 2017年04月19日 10:33
  • 4968

【React Native开发】- TextInput键盘输入文本

TextInput是一个允许用户通过键盘输入文本的的组件,该组件提供了多种配置的属性,如自动完成、自动大小写等等。 注意:通过onChangeText从TextInput中获取用户录入的文本是目前唯...
  • baidu_35701759
  • baidu_35701759
  • 2017年06月05日 16:39
  • 1575

《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看1、《React-Native系列》33、 键盘遮挡问题处理2、《React-Native系列...
  • hsbirenjie
  • hsbirenjie
  • 2017年02月17日 20:26
  • 4588

React Native 应用在键盘弹出时优雅地响应

在使用 React Native 应用时,一个常见的问题是当你点击文本输入框时,键盘会弹出并且遮盖住输入框。就像这样: 有几种方式可以避免这种情况发生。一些方法比较简单,另一些稍微复杂。...
  • sinat_17775997
  • sinat_17775997
  • 2017年06月09日 10:01
  • 3974

React Native之TextInput限制只能输入数字和小数

今天做了一个类似计算器的功能的,但是在输入TextInput遇到了这个问题了。那么我这次来写一下关于这个该怎么整理import React from 'react'; import { StyleSh...
  • fox_wei_hlz
  • fox_wei_hlz
  • 2017年04月12日 20:05
  • 3788

react native TextInput各个参数详解,内含事例动图

TextInput 文本输入框 React Native中的文本输入框使用和iOS比较相近,可能是因为 RN 首先封装iOS端的缘故(这点对iOS开发者来说是个好消息) TextInput也是继承自...
  • icefishlily
  • icefishlily
  • 2016年12月28日 15:05
  • 1099
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。
举报原因:
原因补充:

(最多只允许输入30个字)