TextInput
TextInput 是一个允许用户在应用中通过键盘输入文本的基础组件。通过不同的属性,你可以配置自动更正、自动大小写、占位文字,以及数字键盘等不同键盘类型。
最简单的用法就是放一个 TextInput 在界面上,然后订阅它的 onChangeText 事件来读取用户的输入。通常做法是在 onChangeText 中用 setState(或 useState)把用户的输入写入 state,然后在需要的地方从 state 中取值。它还有一些其它的事件,例如 onSubmitEditing 和 onFocus。一个简单的例子如下:
原生元素还暴露了两个方法:.focus() 和 .blur(),可以让你在代码中主动让 TextInput 获取或失去焦点。
注意有些属性仅在 multiline 为 true/false 时才有效。此外,当 multiline=true 时,为元素的某一个边添加边框样式(例如:borderBottomColor、borderLeftWidth 等)将不会生效。为了实现同样的效果,你可以使用一个 View 来包裹 TextInput:
TextInput 在视图底部默认会有一条下划线边框。这个边框的 padding 是由系统提供的背景图片决定的,无法直接修改。要避免这个问题,可以不显式设置高度,让系统自己把边框画在合适的位置;或者将 underlineColorAndroid 设为透明来隐藏这条下划线。
注意,在 Android 上对输入框进行文本选择时,可能会把当前 Activity 的 windowSoftInputMode 参数改成 adjustResize。这会在键盘弹出时影响使用 position: 'absolute' 布局的组件。要避免这种行为,可以在 AndroidManifest.xml 里显式设置合适的 windowSoftInputMode(详见 https://developer.android.com/guide/topics/manifest/activity-element.html),或者通过原生代码在运行时控制这个参数。
Reference
Props
View Props
继承 View Props。
allowFontScaling
控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
| Type |
|---|
| bool |
autoCapitalize
控制 TextInput 是否要自动将特定字符切换为大写。某些键盘类型(例如 name-phone-pad)不支持此特性。
characters: 所有的字符。words: 每个单词的第一个字符。sentences: 每句话的第一个字符(默认)。none: 不切换。
| Type |
|---|
| enum('none', 'sentences', 'words', 'characters') |
autoComplete
为系统提供自动补全提示,从而启用系统级的自动填充。在 Android 上,系统会通过启发式判断内容类型,尽可能提供自动填充。要禁用自动补全,将 autoComplete 设为 off。
The following values work across platforms:
additional-nameaddress-line1address-line2birthdate-day(iOS 17+)birthdate-full(iOS 17+)birthdate-month(iOS 17+)birthdate-year(iOS 17+)cc-csc(iOS 17+)cc-exp(iOS 17+)cc-exp-day(iOS 17+)cc-exp-month(iOS 17+)cc-exp-year(iOS 17+)cc-numbercountrycurrent-passwordemailfamily-namegiven-namehonorific-prefixhonorific-suffixnamenew-passwordoffone-time-codepostal-codestreet-addresstelusername
下列取值仅在 iOS 上生效:
cc-family-name(iOS 17+)cc-given-name(iOS 17+)cc-middle-name(iOS 17+)cc-name(iOS 17+)cc-type(iOS 17+)nicknameorganizationorganization-titleurl
下列取值仅在 Android 上生效:
gendername-familyname-givenname-middlename-middle-initialname-prefixname-suffixpasswordpassword-newpostal-addresspostal-address-countrypostal-address-extendedpostal-address-extended-postal-codepostal-address-localitypostal-address-regionsms-otptel-country-codetel-devicetel-nationalusername-new
| Type |
|---|
| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
autoCorrect
如果为 false,会关闭拼写自动修正。默认值是 true。
| Type |
|---|
| bool |
autoFocus
如果为 true,在componentDidMount后会获得焦点。默认值为 false。
| Type |
|---|
| bool |
blurOnSubmit
submitBehavior 现在取代了 blurOnSubmit,并会覆盖由 blurOnSubmit 定义的行为。详见 submitBehavior。
如果为 true,文本框会在提交的时候失焦。对于单行输入框默认值为 true,多行则为 false。注意:对于多行输入框来说,如果将 blurOnSubmit 设为 true,按下回车键时会失去焦点并触发 onSubmitEditing 事件,而不会在输入框中插入换行。
| Type |
|---|
| bool |
caretHidden
如果为 true,则隐藏光标。默认值为 false。
| Type |
|---|
| bool |
clearButtonMode iOS
是否要在文本框右侧显示“清除”按钮。仅在单行模式下可用。默认值为never。
| Type |
|---|
| enum('never', 'while-editing', 'unless-editing', 'always') |
clearTextOnFocus iOS
如果为 true,每次开始输入的时候都会清除文本框的内容。
| Type |
|---|
| bool |
contextMenuHidden
如果为 true,将隐藏文本选择时弹出的上下文菜单。默认值为 false。
| Type |
|---|
| bool |
dataDetectorTypes iOS
设置 text input 内能被转化为可点击 URL 的数据的类型。当且仅当multiline={true}和editable={false}时起作用。默认情况下不检测任何数据类型。
可接受一个类型值或类型值数组。
dataDetectorTypes的可用值有:
'phoneNumber''link''address''calendarEvent''none''all'
| Type |
|---|
| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
defaultValue
提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。在一些简单的使用情形下,如果你不想用监听消息然后更新 value 属性的方法来保持属性和状态同步的时候,就可以用 defaultValue 来代替。
| Type |
|---|
| string |
disableKeyboardShortcuts iOS
如果为 true,将禁用键盘上的快捷按钮(撤销/重做和复制按钮)。默认值为 false。
| Type | Default |
|---|---|
| bool | false |
cursorColor Android
如果设置,将改变组件中光标(caret)的颜色。与 selectionColor 不同,光标颜色会独立于选区高亮颜色单独设置。
| Type |
|---|
| color |
disableFullscreenUI Android
当值为 false 时, 如果 text input 的周围有少量可用空间的话(比如说,当手机横过来时),操作系统可能会将这个 text input 设置为全屏模式。当值为 true 时, 这个特性不可用,text input 就是普通的模式。默认为 false。
| Type |
|---|
| bool |
editable
如果为 false,文本框是不可编辑的。默认值为 true。
| Type |
|---|
| bool |
enablesReturnKeyAutomatically iOS
如果为 true,当输入框内容为空时,键盘会禁用回车键;一旦有文本输入,则自动启用回车键。默认值为 false。
| Type |
|---|
| bool |
enterKeyHint
决定“回车”键上显示的文字。优先级高于 returnKeyType 属性。
以下取值在所有平台上都可用:
donenextsearchsendgo
仅 Android 可用
以下取值仅在 Android 上生效:
previous
仅 iOS 可用
以下取值仅在 iOS 上生效:
enter
| Type |
|---|
| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
importantForAutofill Android
告知操作系统:应用中的某个输入字段是否应该被包含在用于自动填充(autofill)的视图结构中(Android API 26+)。可选值有 auto、no、noExcludeDescendants、yes 和 yesExcludeDescendants,默认值为 auto。
auto:让 Android 系统自行通过启发式判断该视图是否对自动填充重要。no:此视图对自动填充不重要。noExcludeDescendants:此视图及其所有子视图对自动填充都不重要。yes:此视图对自动填充很重要。yesExcludeDescendants:此视图对自动填充重要,但其子视图不重要。
| Type |
|---|
| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
inlineImageLeft Android
指定一个图片放置在左侧。图片必须放置在/android/app/src/main/res/drawable目录下,经过编译后按如下形式引用(无路径无后缀):
<TextInput
inlineImageLeft='search_icon'
/>
| Type |
|---|
| string |
inlineImagePadding Android
若有内联图片,设置图片与文本输入框之间的内边距。
| Type |
|---|
| number |
inputAccessoryViewID iOS
一个可选的标识符,用来将自定义的 InputAccessoryView 绑定到当前输入框。当该输入框获得焦点时,这个 InputAccessoryView 会显示在键盘上方。
| Type |
|---|
| string |
inputAccessoryViewButtonLabel iOS
可选的按钮文案,用来覆盖默认 InputAccessoryView 上的按钮标签。
默认情况下,这个按钮标签不会做本地化处理,可以通过此属性提供一份本地化后的文案。
| Type |
|---|
| string |
inputMode
行为类似 HTML 中的 inputmode 属性,用来决定打开哪种键盘(如 numeric),并且优先级高于 keyboardType。
支持以下取值:
nonetextdecimalnumerictelsearchemailurl
| Type |
|---|
| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
keyboardAppearance iOS
设置键盘的配色风格。
| Type |
|---|
| enum('default', 'light', 'dark') |
keyboardType
决定弹出何种软键盘类型,譬如numeric(纯数字键盘)。
所有键盘类型的示意图可参考这里:链接。
这些值在所有平台都可用:
defaultnumber-paddecimal-padnumericemail-addressphone-padurl
下面的值仅 iOS 可用:
ascii-capablenumbers-and-punctuationname-phone-padtwitterweb-search
下面的值仅 Android 可用:
visible-password
| Type |
|---|
| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
maxFontSizeMultiplier
指定在启用 allowFontScaling 时字体可放大的最大倍数。可选取值:
null/undefined(默认):继承父节点或全局默认值(0)0:不限制最大值,忽略父级/全局默认>= 1:将当前节点的maxFontSizeMultiplier设置为该数值
| Type |
|---|
| number |
maxLength
限制文本框中最多的字符数。使用这个属性而不用 JS 逻辑去实现,可以避免闪烁的现象。
| Type |
|---|
| number |
multiline
如果为 true,文本框中可以输入多行文字。默认值为 false。注意安卓上如果设置multiline = {true},文本默认会垂直居中,可设置textAlignVertical: 'top'样式来使其居顶显示。
| Type |
|---|
| bool |
numberOfLines Android
numberOfLines 在 iOS 上仅在新架构中可用。
设置 TextInput 的最大行数。通常配合 multiline={true} 一起使用,以便填满指定的行数。
| Type |
|---|
| number |
onBlur
当文本框失去焦点的时候调用此回调函数。
如果你尝试从 nativeEvent 中读取 text,要注意该值可能为 undefined,从而导致一些意料之外的错误。如果你需要拿到 TextInput 的最终值,更推荐使用在编辑完成时触发的 onEndEditing 事件。
| Type |
|---|
({nativeEvent: TargetEvent}) => void |
onChange
当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。
| Type |
|---|
({nativeEvent: {eventCount, target, text}}) => void |
onChangeText
当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
| Type |
|---|
| function |
onContentSizeChange
当文本输入内容的尺寸发生变化时调用。仅在多行输入框上触发。
| Type |
|---|
({nativeEvent: {contentSize: {width, height} }}) => void |
onEndEditing
当文本输入结束后调用此回调函数。
| Type |
|---|
| function |
onPressIn
当按压开始时调用的回调。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onPressOut
当按压结束(手指抬起)时调用的回调。
| Type |
|---|
({nativeEvent: PressEvent}) => void |
onFocus
当文本框获得焦点的时候调用此回调函数。
| Type |
|---|
({nativeEvent: TargetEvent}) => void |
onKeyPress
当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } },其中keyValue即为被按下的键。会在 onChange 之前调用。注意:在 Android 上只有软键盘会触发此事件,物理键盘不会触发。
| Type |
|---|
({nativeEvent: {key: keyValue} }) => void |
onLayout
当组件加载或者布局变化的时候调用,回调参数为{ nativeEvent: {layout: {x, y, width, height}, target } }。
| Type |
|---|
({nativeEvent: LayoutEvent}) => void |
onScroll
在内容滚动时持续调用,传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。也可能包含其他和滚动事件相关的参数,但是在 Android 上,出于性能考虑,不会提供contentSize参数。
| Type |
|---|
({nativeEvent: {contentOffset: {x, y} }}) => void |
onSelectionChange
光标位置变化时,传回参数的格式形如{ nativeEvent: { selection: { start, end } } }。
| Type |
|---|
({nativeEvent: {selection: {start, end} }}) => void |
onSubmitEditing
此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数,所传参数为{nativeEvent: {text, eventCount, target}}。如果multiline={true},此属性不可用。
| Type |
|---|
({nativeEvent: {text, eventCount, target}}) => void |
Note that on iOS this method isn't called when using keyboardType="phone-pad".
placeholder
在尚未输入任何文字之前显示的占位字符串。
| Type |
|---|
| string |
placeholderTextColor
占位字符串的文字颜色。
| Type |
|---|
| color |
readOnly
如果为 true,则文本不可编辑。默认值为 false。
| Type |
|---|
| bool |
returnKeyLabel Android
设置“回车”键上显示的文字。优先级高于 returnKeyType。
| Type |
|---|
| string |
returnKeyType
决定“确定”按钮显示的内容。在 Android 上你还可以使用returnKeyLabel。
下列这些选项是跨平台可用的:
donegonextsearchsend
下列这些选项仅 Android 可用:
noneprevious
下列这些选项仅 iOS 可用:
defaultemergency-callgooglejoinrouteyahoo
| Type |
|---|
| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
rejectResponderTermination iOS
如果为 true,允许 TextInput 将触摸事件传递给父组件。这样像 SwipeableListView 这样的组件就可以在 iOS 上从 TextInput 开始滑动(Android 默认就是这种行为)。如果为 false,则 TextInput 会始终请求自己处理输入事件(除非被禁用)。默认值为 true。
| Type |
|---|
| bool |
rows Android
设置 TextInput 的行数。通常配合 multiline={true} 一起使用,以便填满对应的行数。
| Type |
|---|
| number |
scrollEnabled iOS
如果为 false,将禁用文本视图的滚动。默认值为 true。仅在 multiline={true} 时生效。
| Type |
|---|
| bool |
secureTextEntry
如果为 true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为 false。multiline={true}时不可用。
| Type |
|---|
| bool |
selection
设置选中文字的范围(指定首尾的索引值)。如果首尾为同一索引位置,则相当于指定光标的位置。
| Type |
|---|
object: {start: number,end: number} |
selectionColor
设置输入框高亮时的颜色(还包括光标)。
| Type |
|---|
| color |
selectionHandleColor Android
设置选择句柄(光标两端拖拽小圆点)的颜色。与 selectionColor 不同,它允许单独定制选择句柄的颜色,而不影响选区高亮的颜色。
| Type |
|---|
| color |
selectTextOnFocus
如果为 true,当获得焦点的时候,所有的文字都会被选中。
| Type |
|---|
| bool |
showSoftInputOnFocus
当为 false 时,在输入框获得焦点时将阻止软键盘弹出。默认值为 true。
| Type |
|---|
| bool |
spellCheck iOS
如果设置为false,则禁用拼写检查的样式(比如错误拼写的单词下的红线)。默认值继承自autoCorrect。
| Type |
|---|
| bool |
smartInsertDelete iOS
如果为 false,iOS 系统在粘贴操作后不会自动插入额外空格,在剪切或删除操作后也不会自动删除一个或两个空格。
| Type | Default |
|---|---|
| bool | true |
textAlign
控制输入文字在输入框中的对齐方式,可选值为左对齐、居中或右对齐:
leftcenterright
| Type |
|---|
| enum('left', 'center', 'right') |
textContentType iOS
向键盘和系统提供用户输入内容的语义信息,让系统更好地理解该字段的用途。
autoComplete 提供了相同的能力,并且适用于所有平台。你可以结合 Platform.select 来实现不同平台上的差异化行为。
建议避免同时使用 textContentType 和 autoComplete。出于向后兼容考虑,当两者都设置时,以 textContentType 为准。
你可以将 textContentType 设置为 username 或 password 来启用从设备钥匙串自动填充登录信息。
newPassword 可用于标记一个“新密码”输入框,方便用户将其保存在钥匙串中;oneTimeCode 可用于标记验证码输入框,以便从短信中自动填充一次性验证码。
若要禁用自动填充,将 textContentType 设为 none。
Possible values for textContentType are:
noneaddressCityaddressCityAndStateaddressStatebirthdate(iOS 17+)birthdateDay(iOS 17+)birthdateMonth(iOS 17+)birthdateYear(iOS 17+)countryNamecreditCardExpiration(iOS 17+)creditCardExpirationMonth(iOS 17+)creditCardExpirationYear(iOS 17+)creditCardFamilyName(iOS 17+)creditCardGivenName(iOS 17+)creditCardMiddleName(iOS 17+)creditCardName(iOS 17+)creditCardNumbercreditCardSecurityCode(iOS 17+)creditCardType(iOS 17+)emailAddressfamilyNamefullStreetAddressgivenNamejobTitlelocationmiddleNamenamenamePrefixnameSuffixnewPasswordnicknameoneTimeCodeorganizationNamepasswordpostalCodestreetAddressLine1streetAddressLine2sublocalitytelephoneNumberURLusername
| Type |
|---|
| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
passwordRules iOS
当在 iOS 上将 textContentType 设置为 newPassword 时,可以告诉系统密码的最小要求,以便系统为你生成一个满足条件的密码。如何编写合法的 PasswordRules 字符串,请参考 Apple 文档。
如果没有看到系统弹出的密码生成对话框,请检查:
- 是否开启了自动填充:设置 → 密码与账户 → 打开 自动填充密码;
- 是否启用了 iCloud 钥匙串:设置 → Apple ID → iCloud → 钥匙串 → 打开 iCloud 钥匙串。
| Type |
|---|
| string |
style
注意:并不是所有 Text 相关样式都对 TextInput 有效,下面是不完全的“不支持列表”:
borderLeftWidthborderTopWidthborderRightWidthborderBottomWidthborderTopLeftRadiusborderTopRightRadiusborderBottomRightRadiusborderBottomLeftRadius
| Type |
|---|
| Text |
textBreakStrategy Android
在 Android API Level 23+ 上设置文本换行策略,可选值有 simple、highQuality、balanced,默认值为 highQuality。
| Type |
|---|
| enum('simple', 'highQuality', 'balanced') |
underlineColorAndroid Android
TextInput 下划线的颜色。
| Type |
|---|
| color |
value
要在输入框中显示的值。TextInput 是一个受控组件,这意味着如果提供了 value,原生输入框的内容会被强制与该值保持一致。大多数情况下这都很好用,但在某些场景下可能会导致闪烁——常见原因是通过保持 value 不变来阻止用户编辑。除了维持同样的 value 之外,更好的做法是将 editable 设为 false,或者设置/更新 maxLength 来避免不希望的编辑,同时不产生闪烁。
| Type |
|---|
| string |
lineBreakStrategyIOS iOS
在 iOS 14+ 上设置换行策略。可选值有 none、standard、hangul-word 和 push-out。
| Type | Default |
|---|---|
enum('none', 'standard', 'hangul-word', 'push-out') | 'none' |
lineBreakModeIOS iOS
在 iOS 上设置换行模式。可选值有:wordWrapping、char、clip、head、middle 和 tail。
| Type | Default |
|---|---|
enum('wordWrapping', 'char', 'clip', 'head', 'middle', 'tail') | 'wordWrapping' |
Methods
.focus()
focus();
使原生输入框请求获得焦点。
.blur()
blur();
使原生输入框失去焦点。
clear()
clear();
清空 TextInput 中的所有文本。
isFocused()
isFocused(): boolean;
如果当前输入框处于焦点状态,则返回 true,否则返回 false。
已知问题
- react-native#19096:不支持 Android 的
onKeyPreIme。 - react-native#19366:在通过返回键关闭 Android 键盘之后调用
.focus()无法再次唤起键盘。 - react-native#26799:在
keyboardType="email-address"或keyboardType="phone-pad"时,不支持 Android 上的secureTextEntry。