React Native 中的收键盘和起键盘
手动收键盘
RN新版本(≥0.36):1
2
3import { Keyboard, TextInput } from 'react-native';
//...
Keyboard.dismiss();
RN老版本(<0.36):1
2import dismissKeyboard from 'dismissKeyboard';
dismissKeyboard();
自动收键盘
ScrollView
和ListView
都支持滑动时自动收键盘,需要如下设置: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() // 手动起键盘
}