React Native之TextInput组件解析示例
1 概述
textinput组件和text组件类似,内部都没有使用flexbox布局,不同的是textinput组件支持文字的输入,因为支持文字输入, textinput组件要比text组件多了一些属性和方法。textinput组件支持text组件所有的style属性,而textinput组件本身是没有特有的style属性的。
2 属性
textinput组件支持所有的view组件的属性,除此之外,它还有许多其他属性。
2.1 onchangetext
当输入框的内容发生变化时,就会调用onchangetext。
index.android.js
import react, {component} from 'react'; import {appregistry, stylesheet, view, textinput, button,alert} from 'react-native'; class textapp extends component { constructor(props) { super(props); this.state = { searchtext: "" } } render() { return ( <view style={styles.container}> <view style={styles.searchbar}> <textinput style={styles.input} placeholder='请输入内容' onchangetext={(text) => { this.setstate({searchtext: text}); }}/> <button style={styles.button} title='搜索' onpress={ () => { alert.alert('输入的内容为:' + this.state.searchtext); } }/> </view> </view> ); } } const styles = stylesheet.create({ container: { flex: 1, }, searchbar: { flexdirection: 'row', height: 45, justifycontent: 'center', alignitems: 'center' }, input: { flex: 1, bordercolor: 'gray' }, button: { flex: 1 } }); appregistry.registercomponent('viewsample', () => textapp);
上面的例子我们用到了textinput组件的onchangetext属性,当我们在textinput中输入内容时,这个内容就会通过onchangetext的参数text传递回来,在onchangetext中将text的内容保存到state中。当我们点击button时,通过alert将state中保存的内容展现出来。
运行程序效果如下图所示。
在输入框中输入android,点击搜索button,可以看到输入的android展示到了alert中。
2.2 onchange
当输入框的内容发生变化时,也会调用onchange,只不过它所返回的参数是一个event,我们来改写2.1的代码:
... <textinput style={styles.input} placeholder='请输入内容' keyboardtype='default' onchange={(event) => { this.setstate({searchtext: event.nativeevent.text}); }}/> ...
通过event.nativeevent.text可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用onchangetext比较合适。
2.3 keyboardtype
keyboardtype用于设置弹出软键盘的类型。它的取值为范围为: enum(‘default', ‘email-address', ‘numeric', ‘phone-pad', ‘ascii-capable', ‘numbers-and-punctuation', ‘url', ‘number-pad', ‘name-phone-pad', ‘decimal-pad', ‘twitter', ‘web-search') ,其中default、numeric、email-address和phone-pad是跨平台。
... <textinput style={styles.input} placeholder='请输入内容' keyboardtype='phone-pad' onchangetext={(text) => { this.setstate({searchtext: text}); }}/> ...
将keyboardtype的值设置为phone-pad,效果如下图所示。
2.4 bluronsubmit
如果bluronsubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,bluronsubmit默认值为true,多行则为false。
在单行的情况下,点击键盘上的提交按钮时,textinput的效果如下图所示。
将bluronsubmit设置为false:
... <textinput style={styles.input} placeholder='请输入内容' bluronsubmit={false} onchangetext={(text) => { this.setstate({searchtext: text}); }}/> ...
点击键盘上的提交按钮时,textinput的效果如下图所示。
2.5 onsubmitediting
当提交键被按下时会调用onsubmitediting,如果multiline等于true,则此属性不可用。
... <textinput style={styles.input} placeholder='请输入内容' bluronsubmit={true} multiline={false} onchangetext={(text) => { this.setstate({searchtext: text}); }} onsubmitediting={(event) => { console.log(event.nativeevent.text); }} /> ...
运行程序并在app的开发菜单中选择debug js remotely,这时我们输入android并按下提交键,在console控制台中就会输出结果。(笔者用的是webstorm)
2.6 returnkeytype
用于设置软键盘回车键的样式,android平台可以使用returnkeylabel来设置软键盘回车键的内容。
returnkeytype的取值为enum(‘done', ‘go', ‘next', ‘search', ‘send', ‘none', ‘previous', ‘default', ‘emergency-call', ‘google', ‘join', ‘route', ‘yahoo')。
其中跨平台的取值有:done、next、search、send。
android平*有:none、previous。
ios平*有:default、emergency-call、google、join、route、yahoo。
如果我们将returnkeytype设置为go时,效果如下图所示。
returnkeytype设置为send时,效果如下图所示。
2.7 其他跨平台属性
属性名 | 取值 | 说明 |
---|---|---|
autocapitalize | enum(‘none', ‘sentences', ‘words', ‘characters') | 设置英文字母自动大写规则,取值分别表示:不自动大写、每句话首字母自动大写、每个单词首字母大写、全部字母自动大写 |
autocorrect | bool | 是否会自动检测用户输入的英语单词正确性,默认值为true |
autofocus | bool | 如果为true,在componentdidmount后会获得焦点。默认值为false。 |
defaultvalue | string | 字符初始值,当用户开始输入时,该值将改变 |
placeholder | node | 文本输入之前将呈现的字符串,多用于提示用户应该输入什么 |
placeholdertextcolor | color | 文本输入之前将呈现的字符串的颜色 |
editable | bool | 是否允许修改字符,默认值为true |
maxlength | number | 最多允许用户输入多少字符 |
carethidden | bool | 如果为true,则隐藏光标 |
multiline | bool | 如果为true,则文本输入可以是多行的,默认值为false |
securetextentry | bool | 文本框是否用于输入密码,默认值为false |
selecttextonfocus | bool | 如果为true,则文本框获取焦点时,组件中的内容会被自动选中 |
onfocus | function | 当文本框获得焦点的时候调用此回调函数 |
onendediting | function | 当文本输入结束后调用此回调函数 |
onlayout | function | 当组件挂载或者布局变化的时候调用,参数为{x, y, width, height} |
onscroll | function | 在内容滚动时持续调用,传回参数的格式形如{ nativeevent: { contentoffset: { x, y } } } |
onselectionchange | function | 长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 { nativeevent: { selection: { start, end } } } |
value | string | 文本框中的文字内容 |
2.8 android平*有属性
属性名 | 取值 | 说明 |
---|---|---|
inlineimageleft | string | 指定一个图片放置在左侧 |
inlineimagepadding | number | 左侧图片的padding(如果有的话),以及文本框本身的padding |
numberoflines | number | textinput的行数 |
underlinecolorandroid | string | textinput的下划线颜色 |
returnkeylabel | string | 设置软键盘回车键的内容,优先级高于returnkeytype |
disablefullscreenui | bool | 值为false时(默认值),如果textinput的输入空间小,系统可能会进入全屏文本输入模式 |
2.9 ios平*有属性
属性名 | 取值 | 说明 |
---|---|---|
clearbuttonmode | enum(‘never', ‘while-editing', ‘unless-editing', ‘always') | 何时在文本框右侧显示清除按钮 |
cleartextonfocus | bool | 如果为true,每次开始输入的时候都会清除文本框的内容 |
keyboardappearance | enum(‘default', ‘light', ‘dark') | 键盘的颜色 |
onkeypress | function | 一个键被按下的时候调用此回调,传递给回调函数的参数为{ nativeevent: { key: keyvalue } } |
spellcheck | bool | 如果为false,则禁用拼写检查的样式(比如红色下划线) |
enablesreturnkeyautomatically | bool | 如果为true,键盘会在文本框内没有文字的时候禁用确认按钮 ,默认值为false |
3 方法
clear()
clear用于清空输入框的内容。
想要使用组件的方法则需要使用组件的引用,例子如下所示。
... render() { return ( <view style={styles.container}> <view style={styles.searchbar}> <textinput style={styles.input} ref="textinputrefer" placeholder='请输入内容' bluronsubmit={true} returnkeytype='send' onchangetext={(text) => { this.setstate({searchtext: text}); }} /> <button style={styles.button} title='清除' onpress={ () => { this.refs.textinputrefer.clear(); } }/> </view> </view> ); } ...
在textinput标签中定义引用的名称:ref="textinputrefer",这样我们通过 this.refs.textinputrefer就可以得到textinput 组件的引用。在button的onpress函数中,调用了textinput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。
isfocused(): boolean
返回值表明当前输入框是否获得了焦点。
好了,到这里textinput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 详谈innerHTML innerText的使用和区别
下一篇: js实现方块上下左右移动效果