React-Native强制关闭软键盘

项目场景：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>

总结：

以上三种应该是可以应对绝大多事软键盘关闭问题：

1.监听事件调用API{Keyboard}：
可以用在点击时，视图变化时

2.内容囊括在ScrollView滚动组件中并调用props属性scrollEnabled={false}：
可以用在内容未超过本机高度处，方式出现不可以滑动BUG和视图未显示完全BUG

3.使用TouchableWithoutFeedback点击组件囊括内容并调用API{Keyboard}：
可以使用在第二种方法不可解决处既要使ScrollView可以滚动也可以点击任意位置强制关闭软键盘

---

麻烦各位看官，检查对应问题并使用对应解决方法。 如果有不对的地方，麻烦下方留言。谢谢！