TextInput
一个用于通过键盘向应用程序输入文本的基础组件。属性提供了多种功能的配置,例如自动更正、自动大写、占位符文本和不同键盘类型(如数字小键盘)。
最基本的用例是放置一个 TextInput
并订阅 onChangeText
事件以读取用户输入。还有其他事件,例如 onSubmitEditing
和 onFocus
可以订阅。一个最小的示例:
通过原生元素暴露的两个方法是 .focus()
和 .blur()
,它们将以编程方式聚焦或模糊 TextInput。
请注意,某些属性仅适用于 multiline={true/false}
。此外,如果 multiline=true
,则仅适用于元素一侧的边框样式(例如 borderBottomColor
、borderLeftWidth
等)将不会应用。要达到同样的效果,你可以将 TextInput
包装在一个 View
中。
TextInput
默认在其视图底部有一个边框。该边框的内边距由系统提供的背景图像设置,无法更改。避免这种情况的解决方案是:要么不显式设置高度,在这种情况下系统会负责在正确位置显示边框;要么通过将 underlineColorAndroid
设置为透明来不显示边框。
请注意,在 Android 上,在输入框中执行文本选择可能会将应用程序的 activity windowSoftInputMode
参数更改为 adjustResize
。这可能会导致键盘激活时,position: 'absolute' 的组件出现问题。为避免此行为,可以在 AndroidManifest.xml 中指定 windowSoftInputMode
( https://developer.android.com.cn/guide/topics/manifest/activity-element.html ),或者使用原生代码以编程方式控制此参数。
参考
属性 (Props)
View 属性
继承 View 属性。
allowFontScaling
指定字体是否应根据文本大小可访问性设置进行缩放。默认值为 true
。
类型 |
---|
布尔值 |
autoCapitalize
告诉 TextInput
自动将某些字符大写。此属性不被某些键盘类型(如 name-phone-pad
)支持。
characters
: 所有字符。words
: 每个单词的首字母。sentences
: 每个句子的首字母 (默认值)。none
: 不自动大写任何内容。
类型 |
---|
枚举('none', 'sentences', 'words', 'characters') |
autoComplete
为系统指定自动补全提示,以便它提供自动填充。在 Android 上,系统将始终尝试通过使用启发式方法识别内容类型来提供自动填充。要禁用自动补全,请将 autoComplete
设置为 off
。
以下值在所有平台上都有效:
additional-name
address-line1
address-line2
birthdate-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-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
以下值仅在 iOS 上有效
cc-family-name
(iOS 17+)cc-given-name
(iOS 17+)cc-middle-name
(iOS 17+)cc-name
(iOS 17+)cc-type
(iOS 17+)nickname
organization
organization-title
url
以下值仅在 Android 上有效
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
类型 |
---|
枚举('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
。
类型 |
---|
布尔值 |
autoFocus
如果为 true
,则聚焦输入框。默认值为 false
。
类型 |
---|
布尔值 |
blurOnSubmit
已弃用。 请注意,
submitBehavior
现在取代了blurOnSubmit
,并将覆盖blurOnSubmit
定义的任何行为。请参阅 submitBehavior
如果为 true
,文本字段将在提交时失去焦点。单行字段的默认值为 true,多行字段的默认值为 false。请注意,对于多行字段,将 blurOnSubmit
设置为 true
意味着按下回车键将使字段失去焦点并触发 onSubmitEditing
事件,而不是在字段中插入新行。
类型 |
---|
布尔值 |
caretHidden
如果为 true
,则隐藏插入符。默认值为 false
。
类型 |
---|
布尔值 |
clearButtonMode
iOS
清除按钮何时应出现在文本视图的右侧。此属性仅受单行 TextInput 组件支持。默认值为 never
。
类型 |
---|
枚举('never', 'while-editing', 'unless-editing', 'always') |
clearTextOnFocus
iOS
如果为 true
,则在开始编辑时自动清除文本字段。
类型 |
---|
布尔值 |
contextMenuHidden
如果为 true
,则隐藏上下文菜单。默认值为 false
。
类型 |
---|
布尔值 |
dataDetectorTypes
iOS
确定在文本输入中转换为可点击 URL 的数据类型。仅当 multiline={true}
和 editable={false}
时有效。默认情况下不检测任何数据类型。
您可以提供一种类型或多种类型的数组。
dataDetectorTypes
的可能值为:
'phoneNumber'
'link'
'address'
'calendarEvent'
'none'
'all'
类型 |
---|
枚举('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,枚举数组('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
defaultValue
提供一个初始值,该值会在用户开始输入时更改。对于不希望处理事件监听和更新值属性以保持受控状态同步的用例很有用。
类型 |
---|
字符串 |
cursorColor
Android
提供时,它将设置组件中光标(或“插入符”)的颜色。与 selectionColor
的行为不同,光标颜色将独立于文本选择框的颜色进行设置。
类型 |
---|
颜色 |
disableFullscreenUI
Android
当 false
时,如果文本输入周围有少量可用空间(例如,手机横屏方向),操作系统可能会选择让用户在全屏文本输入模式下编辑文本。当 true
时,此功能被禁用,用户将始终直接在文本输入内部编辑文本。默认为 false
。
类型 |
---|
布尔值 |
editable
如果为 false
,则文本不可编辑。默认值为 true
。
类型 |
---|
布尔值 |
enablesReturnKeyAutomatically
iOS
如果为 true
,则当没有文本时键盘会禁用回车键,并在有文本时自动启用。默认值为 false
。
类型 |
---|
布尔值 |
enterKeyHint
确定回车键应显示什么文本。优先于 returnKeyType
属性。
以下值在所有平台上都有效:
enter
done
next
search
send
仅限 Android
以下值仅在 Android 上有效
previous
类型 |
---|
枚举('enter', 'done', 'next', 'previous', 'search', 'send') |
importantForAutofill
Android
告诉操作系统您的应用程序中的各个字段是否应包含在 Android API Level 26+ 上的自动填充视图结构中。可能的值有 auto
、no
、noExcludeDescendants
、yes
和 yesExcludeDescendants
。默认值为 auto
。
auto
: 让 Android 系统使用其启发式方法来确定视图对于自动填充是否重要。no
: 此视图对于自动填充不重要。noExcludeDescendants
: 此视图及其子视图对于自动填充不重要。yes
: 此视图对于自动填充很重要。yesExcludeDescendants
: 此视图对于自动填充很重要,但其子视图对于自动填充不重要。
类型 |
---|
枚举('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
inlineImageLeft
Android
如果定义,提供的图像资源将渲染在左侧。图像资源必须位于 /android/app/src/main/res/drawable
内,并像这样引用:
<TextInput
inlineImageLeft='search_icon'
/>
类型 |
---|
字符串 |
inlineImagePadding
Android
行内图像(如果有)与文本输入本身之间的填充。
类型 |
---|
数字 |
inputAccessoryViewID
iOS
一个可选的标识符,用于将自定义 InputAccessoryView 链接到此文本输入。当此文本输入聚焦时,InputAccessoryView 会显示在键盘上方。
类型 |
---|
字符串 |
inputAccessoryViewButtonLabel
iOS
一个可选的标签,用于覆盖默认的 InputAccessoryView 按钮标签。
默认情况下,默认按钮标签不会本地化。使用此属性可提供本地化版本。
类型 |
---|
字符串 |
inputMode
作用类似于 HTML 中的 inputmode
属性,它决定打开哪个键盘,例如 numeric
,并优先于 keyboardType
。
支持以下值
none
text
decimal
numeric
tel
search
email
url
类型 |
---|
枚举('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
keyboardAppearance
iOS
确定键盘的颜色。
类型 |
---|
枚举('default', 'light', 'dark') |
keyboardType
确定打开哪个键盘,例如 numeric
。
在此处查看所有类型的屏幕截图:here。
以下值在所有平台上都有效:
default
number-pad
decimal-pad
numeric
email-address
phone-pad
url
仅限 iOS
以下值仅在 iOS 上有效
ascii-capable
numbers-and-punctuation
name-phone-pad
twitter
web-search
仅限 Android
以下值仅在 Android 上有效
visible-password
类型 |
---|
枚举('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
设置为此值
类型 |
---|
数字 |
maxLength
限制可输入的字符最大数量。请使用此属性,而不是在 JS 中实现逻辑,以避免闪烁。
类型 |
---|
数字 |
multiline
如果为 true
,文本输入可以是多行。默认值为 false
。
值得注意的是,这在 iOS 上会将文本对齐到顶部,在 Android 上居中。在两个平台中都使用 textAlignVertical
并将其设置为 top
以获得相同的行为。
类型 |
---|
布尔值 |
numberOfLines
iOS 上的 numberOfLines
仅在 新架构 中可用。
设置 TextInput
的最大行数。与 multiline
设置为 true
一起使用,以便能够填充行。
类型 |
---|
数字 |
onBlur
文本输入失去焦点时调用的回调函数。
注意:如果您尝试从
nativeEvent
访问text
值,请记住您获取的最终值可能为undefined
,这可能导致意外错误。如果您试图查找 TextInput 的最后一个值,您可以使用onEndEditing
事件,该事件在编辑完成时触发。
类型 |
---|
({nativeEvent: TargetEvent}) => void |
onChange
文本输入文本更改时调用的回调函数。
类型 |
---|
({nativeEvent: {eventCount, target, text}} ) => void |
onChangeText
文本输入文本更改时调用的回调。更改后的文本作为单个字符串参数传递给回调处理程序。
类型 |
---|
函数 |
onContentSizeChange
文本输入内容大小更改时调用的回调函数。
仅针对多行文本输入调用。
类型 |
---|
({nativeEvent: {contentSize: {width, height} }} ) => void |
onEndEditing
文本输入结束时调用的回调函数。
类型 |
---|
函数 |
onPressIn
触摸开始时调用的回调函数。
类型 |
---|
({nativeEvent: PressEvent}) => void |
onPressOut
触摸释放时调用的回调函数。
类型 |
---|
({nativeEvent: PressEvent}) => void |
onFocus
文本输入聚焦时调用的回调函数。
类型 |
---|
({nativeEvent: TargetEvent}) => void |
onKeyPress
按键时调用的回调函数。此函数将接收一个对象,其中 keyValue
对于回车键是 'Enter'
,对于退格键是 'Backspace'
,否则是输入的字符,包括空格符 ' '
。在 onChange
回调之前触发。注意:在 Android 上只处理软键盘输入,不处理硬件键盘输入。
类型 |
---|
({nativeEvent: {key: keyValue} } ) => void |
onLayout
在挂载和布局更改时调用。
类型 |
---|
({nativeEvent: LayoutEvent}) => void |
onScroll
在内容滚动时调用。也可能包含 ScrollEvent
的其他属性,但出于性能原因,Android 不提供 contentSize
。
类型 |
---|
({nativeEvent: {contentOffset: {x, y} }} ) => void |
onSelectionChange
当文本输入选择范围更改时调用的回调函数。
类型 |
---|
({nativeEvent: {selection: {start, end} }} ) => void |
onSubmitEditing
文本输入提交按钮被按下时调用的回调函数。
类型 |
---|
({nativeEvent: {text, eventCount, target}} ) => void |
请注意,在 iOS 上使用 keyboardType="phone-pad"
时不会调用此方法。
placeholder
在文本输入前渲染的字符串。
类型 |
---|
字符串 |
placeholderTextColor
占位符字符串的文本颜色。
类型 |
---|
颜色 |
readOnly
如果为 true
,文本不可编辑。默认值为 false
。
类型 |
---|
布尔值 |
returnKeyLabel
Android
将回车键设置为标签。使用它而不是 returnKeyType
。
类型 |
---|
字符串 |
returnKeyType
确定回车键的外观。在 Android 上,您还可以使用 returnKeyLabel
。
跨平台
以下值在所有平台上都有效:
done
go
next
search
send
仅限 Android
以下值仅在 Android 上有效
none
previous
仅限 iOS
以下值仅在 iOS 上有效
default
emergency-call
google
join
route
yahoo
类型 |
---|
枚举('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
。
类型 |
---|
布尔值 |
rows
Android
设置 TextInput
的行数。与 multiline
设置为 true
一起使用,以便能够填充行。
类型 |
---|
数字 |
scrollEnabled
iOS
如果为 false
,则禁用文本视图的滚动。默认值为 true
。仅适用于 multiline={true}
。
类型 |
---|
布尔值 |
secureTextEntry
如果为 true
,则文本输入将输入的文本模糊化,以便密码等敏感文本保持安全。默认值为 false
。不适用于 multiline={true}
。
类型 |
---|
布尔值 |
selection
文本输入选择的起始和结束位置。将起始和结束设置为相同的值以定位光标。
类型 |
---|
对象: {start: number,end: number} |
selectionColor
文本输入的高亮、选择手柄和光标颜色。
类型 |
---|
颜色 |
selectionHandleColor
Android
设置选择手柄的颜色。与 selectionColor
不同,它允许选择手柄的颜色独立于选择的颜色进行自定义。
类型 |
---|
颜色 |
selectTextOnFocus
如果为 true
,则在聚焦时自动选择所有文本。
类型 |
---|
布尔值 |
showSoftInputOnFocus
当 false
时,它将阻止在字段聚焦时显示软键盘。默认值为 true
。
类型 |
---|
布尔值 |
spellCheck
iOS
如果为 false
,则禁用拼写检查样式(即红色下划线)。默认值继承自 autoCorrect
。
类型 |
---|
布尔值 |
submitBehavior
当按下回车键时,
对于单行输入
'newline'
默认为'blurAndSubmit'
undefined
默认为'blurAndSubmit'
对于多行输入
'newline'
添加新行undefined
默认为'newline'
对于单行和多行输入
'submit'
将只发送提交事件而不使输入失去焦点'blurAndSubmit
' 将同时使输入失去焦点并发送提交事件
类型 |
---|
枚举('submit', 'blurAndSubmit', 'newline') |
textAlign
将输入文本对齐到输入字段的左侧、中间或右侧。
textAlign
的可能值为:
left
center
right
类型 |
---|
枚举('left', 'center', 'right') |
textContentType
iOS
向键盘和系统提供有关用户输入内容的预期语义信息。
autoComplete
提供相同的功能,并适用于所有平台。您可以使用 Platform.select
来实现不同的平台行为。
避免同时使用 textContentType
和 autoComplete
。为了向后兼容,当两个属性都设置时,textContentType
优先。
您可以将 textContentType
设置为 username
或 password
,以启用从设备钥匙串自动填充登录详细信息。
newPassword
可用于指示用户可能希望保存在钥匙串中的新密码输入,而 oneTimeCode
可用于指示字段可以通过短信中收到的代码自动填充。
要禁用自动填充,请将 textContentType
设置为 none
。
textContentType
的可能值为
none
addressCity
addressCityAndState
addressState
birthdate
(iOS 17+)birthdateDay
(iOS 17+)birthdateMonth
(iOS 17+)birthdateYear
(iOS 17+)countryName
creditCardExpiration
(iOS 17+)creditCardExpirationMonth
(iOS 17+)creditCardExpirationYear
(iOS 17+)creditCardFamilyName
(iOS 17+)creditCardGivenName
(iOS 17+)creditCardMiddleName
(iOS 17+)creditCardName
(iOS 17+)creditCardNumber
creditCardSecurityCode
(iOS 17+)creditCardType
(iOS 17+)emailAddress
familyName
fullStreetAddress
givenName
jobTitle
location
middleName
name
namePrefix
nameSuffix
newPassword
nickname
oneTimeCode
organizationName
password
postalCode
streetAddressLine1
streetAddressLine2
sublocality
telephoneNumber
URL
username
类型 |
---|
枚举('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 钥匙串”。
类型 |
---|
字符串 |
style
请注意,并非所有文本样式都受支持,不支持的部分列表包括:
borderLeftWidth
borderTopWidth
borderRightWidth
borderBottomWidth
borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius
类型 |
---|
Text |
textBreakStrategy
Android
设置 Android API Level 23+ 上的文本断行策略,可能的值为 simple
、highQuality
、balanced
。默认值为 highQuality
。
类型 |
---|
枚举('simple', 'highQuality', 'balanced') |
underlineColorAndroid
Android
TextInput
下划线的颜色。
类型 |
---|
颜色 |
value
要为文本输入显示的值。TextInput
是一个受控组件,这意味着如果提供了此值属性,原生值将被强制与此值匹配。对于大多数用例来说,这很好用,但在某些情况下可能会导致闪烁——一个常见的原因是通过保持值不变来阻止编辑。除了设置相同的值之外,还可以设置 editable={false}
,或设置/更新 maxLength
以防止不需要的编辑而不出现闪烁。
类型 |
---|
字符串 |
lineBreakStrategyIOS
iOS
设置 iOS 14+ 上的换行策略。可能的值为 none
、standard
、hangul-word
和 push-out
。
类型 | 默认 |
---|---|
枚举('none' , 'standard' , 'hangul-word' , 'push-out' ) | 'none' |
disableKeyboardShortcuts
iOS
如果为 true
,则禁用键盘快捷键(撤销/重做和复制按钮)。默认值为 false
。
类型 |
---|
布尔值 |
方法
.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
。