TextInput有点类似以我们iOS中的UITextField和UITextView的集合体，反正就是一个文本输入的控件，今天就来让我们一起学习一下TextInput的基本使用
在使用之前，先让我们来了解一些相关属性和方法吧
属性
| 名称 | 作用 | 类型 |
|---|---|---|
| autoCapitalize | 控制TextInput是否要自动将特定字符切换为大写 | enum('none', 'sentences', 'words', 'characters')；characters: 所有的字符；words: 每个单词的第一个字符；sentences: 每句话的第一个字符（默认）；none: 不自动切换任何字符为大写。 |
| autoCorrect | 如果为false，会关闭拼写自动修正。默认值是true。 | bool |
| autoFocus | 如果为true，在componentDidMount后会获得焦点。默认值为false。 | bool |
| blurOnSubmit | 如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行 | bool |
| caretHidden | 如果为true，则隐藏光标。默认值为false | bool |
| defaultValue | 提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变 | string |
| editable | 如果为false，文本框是不可编辑的。默认值为true。 | bool |
| keyboardType | 决定弹出的何种软键盘的 | enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') |
| maxLength | 限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。 | number |
| multiline | 如果为true，文本框中可以输入多行文字。默认值为false。 | bool |
| placeholder | 如果没有任何文字输入，会显示此字符串 | string |
| placeholderTextColor | 占位字符串显示的文字颜色。 | color |
| returnKeyType | 决定“确定”按钮显示的内容 | enum |
| secureTextEntry | 如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。 | bool |
| selectTextOnFocus | 如果为true，当获得焦点的时候，所有的文字都会被选中。 | bool |
| selection | 设置选中文字的范围（指定首尾的索引值）。如果首尾为同一索引位置，则相当于指定光标的位置。 | {start: number, end: number} |
| selectionColor | 设置输入框高亮时的颜色（在iOS上还包括光标） | color |
| value | 文本框中的文字内容。 | string |
方法
| 名称 | 作用 |
|---|---|
| onBlur | 当文本框失去焦点的时候调用此回调函数。 |
| onChange | 当文本框内容变化时调用此回调函数 |
| onChangeText | 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 |
| onEndEditing | 当文本输入结束后调用此回调函数。 |
| onFocus | 当文本框获得焦点的时候调用此回调函数。 |
| onLayout | 当组件挂载或者布局变化的时候调用，参数为{x, y, width, height}。 |
| onScroll | 在内容滚动时持续调用，传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滚动事件相关的参数，但是在Android上，出于性能考虑，不会提供contentSize参数 |
| onSelectionChange | 长按选择文本时，选择范围变化时调用此函数，传回参数的格式形如 { nativeEvent: { selection: { start, end } } }。 |
| onSubmitEditing | 此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。 |
| clear | 清空输入框的内容。 |
| isFocused | 返回值表明当前输入框是否获得了焦点 |
监听处理键盘事件
Keyboard API提供如下的静态函数供开发者使用。
- 1、addListener(eventName, callback)；这个函数用来加载一个指定事件的事件监听器，函数中的 eventName 可以是如下值
- keyboardWillShow：软键盘将要显示
- keyboardDidShow：软键盘显示完毕
- keyboardWillHide：软键盘将要收起
- keyboardDidHide：软键盘收起完毕
- keyboardWillChangeFrame：软件盘的 frame 将要改变
- keyboardDidChangeFrame：软件盘的 frame 改变完毕
这个函数返回一个对象。我们可以保存这个对象，在需要释放事件监听器时，调用这个对象的 remove 方法
-
2、removeListener(eventName, callback)，这个函数用来释放一个特定的键盘事件监听器。
-
3、removeAllListener(eventName) 这个函数用来释放一个指定键盘事件的所有事件监听器。
-
4、dissmiss() 这个方法让操作系统收起软键盘。
所有的键盘事件处理函数都能收到一个 event 参数，不过在不同平台下 event 参数可以取到的值不太一样。
Android 平台可以取到的值
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
iOS 平台可以取到的值
- event.easing：这个值始终是 keyboard
- evnet.duration：记录软键盘弹出动画的持续事件，单位是毫秒
- event.startCoordinates.screenX
- event.startCoordinates.screenY
- event.startCoordinates.width
- event.startCoordinates.height
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
基础使用
E8343B70-B934-470A-876A-C9BD25D0883C.png
首先就是使用一下一下基础的功能，相关代码
render() {
return (
<View>
<TextInput style={styles.textInputStyle1}/>
{/*设置初始值*/}
<TextInput style={styles.textInputStyle1} defaultValue="我是输入框" />
{/*设置placehold*/}
<TextInput style={styles.textInputStyle1} placeholder="我是输入框 placehold" />
{/*设置占位符颜色*/}
<TextInput style={styles.textInputStyle1} placeholder="我是输入框 placehold" placeholderTextColor="red"/>
{/*设置键盘类型*/}
<TextInput style={styles.textInputStyle1} placeholder="设置键盘类型" keyboardType="number-pad" />
{/*文本输入可以输入多行*/}
<TextInput style={styles.textInputStyle1} multiline={true} />
{/*文本是不可编辑*/}
<TextInput style={styles.textInputStyle1} placeholder="文本是不可编辑" editable={false} />
{/*密文*/}
<TextInput style={styles.textInputStyle1} placeholder="密文" secureTextEntry={true} />
{/*设置最大字数*/}
<TextInput style={styles.textInputStyle1} placeholder="设置最大字数" maxLength={10} />
</View>
);
}
方法的介绍
其实就是介绍TextInput的一下方法的使用，主要有11个小方法
render(){
return(
<View>
{/*当文本框失去焦点的时候调用此回调函数。*/}
<TextInput style={styles.textInputStyle1} onBlur={this.onBlurEvent}/>
{/*当文本框内容变化时调用此回调函数。*/}
<TextInput name="tttt1" style={styles.textInputStyle1} onChange={this.onChangeEvent}/>
{/*当文本发生变化时，调用该函数。*/}
<TextInput name="tttt1" style={styles.textInputStyle1} onChange={this.onChangeEvent}/>
{/*当结束编辑时，调用该函数*/}
<TextInput name="tttt1" style={styles.textInputStyle1} onChange={this.onEndEditingEvent}/>
</View>
);
}
//事件
//当文本框失去焦点的时候调用此回调函数
onBlurEvent(){
alert('当文本框失去焦点的时候调用此回调函数')
}
//当文本框内容变化时调用此回调函数。
//它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
onChangeEvent(e){
console.log(e.nativeEvent)
}
//onChangeText 回调函数与上面的 onChange 类似，但它的好处是直接可以接收用户输入的字符串。
onChangeTextEvent(e){
console.log(e.nativeEvent)
}
//它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
onEndEditingEvent(e){
console.log(e.nativeEvent)
}
键盘的一些api
效果图
键盘.gif
实现的功能
- 1、点击Text 键盘消失
- 2、下面有一个Text标志键盘状态
相关代码
export class textInput2 extends Component{
//设置一些初始值
constructor(props){
super(props);
this.state = {
KeyboardShown:false,
keyboardDidShowListener:null,
keyboardDidHideListener:null
}
this.keyboardDidShowEvent = this.keyboardDidShowEvent.bind(this)
this.keyboardDidHideEvent = this.keyboardDidHideEvent.bind(this)
}
/*添加监听事件*/
componentWillMount () {
//监听键盘弹出事件
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShowEvent);
//监听键盘隐藏事件
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHideEvent);
}
//=====在这些监听事件中我们写一个label 来标志 =============
//监听键盘弹出事件
keyboardDidShowEvent(){
console.log('监听键盘弹出事件')
this.setState({
KeyboardShown:true
});
}
//监听键盘隐藏事件
keyboardDidHideEvent(){
console.log('监听键盘隐藏事件')
this.setState({
KeyboardShown:false
});
}
/*移除监听事件*/
componentWillUnmount() {
//卸载键盘弹出事件监听
if(this.keyboardDidShowListener != null) {
this.keyboardDidShowListener.remove();
}
//卸载键盘隐藏事件监听
if(this.keyboardDidHideListener != null) {
this.keyboardDidHideListener.remove();
}
}
/*键盘消失*/
dissmissKeyboardEvent() {
Keyboard.dismiss();
}
/*想要实现的功能
* 1、点击Text 键盘消失
* 2、下面有一个Text标志键盘状态
* */
render() {
return (
<View>
<TextInput style={styles.textInputStyle1}/>
<Text style={styles.TextStyle} onPress={this.dissmissKeyboardEvent.bind(this)}>
键盘事件监听:{this.state.KeyboardShown?'开':'关'}
</Text>
</View>
);
}
}
具体的代码我都已经上传到了github上了，想要看的话可以点击下载
网友评论