React Native 中的收键盘和起键盘

手动收键盘

RN新版本(≥0.36)

1
2
3
import { Keyboard, TextInput } from 'react-native';
//...
Keyboard.dismiss();

RN老版本(<0.36)

1
2
import dismissKeyboard from 'dismissKeyboard';
dismissKeyboard();

自动收键盘

ScrollViewListView都支持滑动时自动收键盘,需要如下设置:

1
2
3
4
<ScrollView                           // or ListView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={true} // 或 'always'
// ...

滑动相关:keyboardDismissMode

参数 作用
'on-drag' 默认值,列表滑动时收键盘
'none' 列表滑动时维持键盘
'interactive' iOS only,在安卓下同'none',滑动时可以通过’dragging upward’动作取消收键盘。这个场景没有接触过,不展开。

点击相关:keyboardShouldPersistTaps
新版本(≥0.40)

参数 作用
'never' 默认值,点击非TextInput的子组件后,收键盘,但子组件不会响应事件
'always' 子组件响应事件,不会收键盘,可以搭配上文的手动收键盘大法;ScrollView本身不响应事件
'handled' 这个的描述跟上面的'always'很像,区别可能在于父组件是否捕捉到事件,我没有用过所以比较迷。直接引用官方——

'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。

老版本(<0.40)

参数 作用
false 对应新版本的'never'
true 对应新版本的'always'

起键盘

rn本身没有提供直接的相关方法。
但是我们知道文本输入框focus时,会自动起键盘。TextInput组件本身也提供了很不错的API。

1
2
3
4
5
6
7
8
<TextInput 
ref={(c) => this._input = c} // 获取ref,用于手动起键盘
autoFocus={true} // 首次进入时自动起键盘
/>
// ...
clearText(){
this._input.focus() // 手动起键盘
}