React-Native强制关闭软键盘

最新推荐文章于 2024-04-29 00:32:49 发布

贺知叶

最新推荐文章于 2024-04-29 00:32:49 发布

阅读量2k

点赞数

分类专栏： React-Native 文章标签： react native

本文链接：https://blog.csdn.net/qq_45438854/article/details/112992340

版权

React-Native 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

项目场景：NativeBase切换Tabs未关闭软键盘

示例:UI界面使用NativeBase子组件Tabs，在Tabs中嵌入两个界面，Tab界面中拥有Input输入框效果

问题描述：

当我在Tabs中点击Input输入内容时切换去其他Tab是不会关闭Input输入框，并且输Input输入焦点依然在之前的输入框里面，所以我还是可以继续输入内容，这时BUG发生了。继续在上个输入框输入内容后会造成UI变形，界面显示焦点将会强制聚集到当前Input输入框界面。造成当前视图显示两个页面

原因分析：

由于使用NativeBase中的Tabs时，点击input弹出软键盘并且在切换tab时并没有实时关闭。

所以我应该在他切换Tabs时强制关闭我当前打开的Input软键盘。我将使用React-Native自带的API 'Keyboard’中的Keyboard.dismiss()强制关闭软键盘

解决方案：

一、使用官方API ‘Keyboard’监听键盘动作

在我滑动Tabs时强制关闭软键盘，就是使用Tabs的自带props ‘onScroll={}’监听滑动

import { Keyboard } from 'react-native'

//Keybo.dismiss()
  const onScroll = () => {
    Keyboard.dismiss()
  }
  
/**
  调用上面方法，onScroll是用来监听Tabs页面滑动
*/
 <Tabs onScroll={onScroll}>
		..............
 </Tabs>

二、官方解决方案，把内容囊括在 ScrollView组件中，并且设置ScrollEnable属性为false

也可以用官方提供的解决方式，在ScrollView中包装输入字段，并将scrollEnabled属性设置为false。(一个不可滚动的ScrollView)

import { ScrollView } from 'react-native'
/**
 在输入字段之外的任何单击都会自动隐藏键盘
*/
<ScrollView
  scrollEnabled={false}
 .......
\>
  <TextInput (...) />
</ScrollView>

但并不是所有场景都可以这样实现，你的视图超过的本机高度，需要它去容纳更多内容去滑动显示，但又需要在点击任意位置关闭软键盘。在ScrollView设置该属性将会造成滑动手势消失，只留下一个点击任意位置关闭软键盘效果。这时可以使用另外一种方法实现

三、使用组件 ‘TouchableWithoutFeedback’ 囊括视图并且调用API ‘Keyboard’ 方法强制关闭

TouchableWithoutFeedback就是我点击时没有任何视图方面的反应，所以也可以理解为上面的第二种方法ScrollView一样。加入API 'Keyboard’并使用该属性Keyboard.dismiss(),强制关闭软键盘

//应用对应组件和API
import { TouchableWithoutFeedback,Keyboard} from 'react-native'

//设置关闭软键盘方法
 const onKeyboard= () => {
    Keyboard.dismiss()
  }

/**
在TouchableWithoutFeedback点击事件调用以上方法实现，点击关闭软键盘。
只适用在TouchableWithoutFeedback囊括的视图里面

*/
 <TouchableWithoutFeedback onPress={()=>{onKeyboard()}}>
       ..................
 </TouchableWithoutFeedback>