Skip to main content

TextInput

用于通过键盘将文本输入应用的基础组件。Props 提供多种功能的可配置性，例如自动更正、自动大写、占位符文本和不同的键盘类型（例如数字键盘）。

¥A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

最基本的用例是放下 TextInput 并订阅 onChangeText 事件以读取用户输入。还有其他事件，例如 onSubmitEditing 和 onFocus 可以订阅。一个最小的例子：

¥The most basic use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

通过 native 元素公开的两种方法是 .focus() 和 .blur()，它们将以编程方式聚焦或模糊 TextInput。

¥Two methods exposed via the native element are .focus() and .blur() that will focus or blur the TextInput programmatically.

请注意，某些属性仅适用于 multiline={true/false}。此外，如果 multiline=true，则不会应用仅应用于元素一侧的边框样式（例如 borderBottomColor、borderLeftWidth 等）。要达到相同的效果，你可以将 TextInput 封装在 View 中：

¥Note that some props are only available with multiline={true/false}. Additionally, border styles that apply to only one side of the element (e.g., borderBottomColor, borderLeftWidth, etc.) will not be applied if multiline=true. To achieve the same effect, you can wrap your TextInput in a View:

TextInput：默认情况下，TextInput 在其视图底部有一个边框。该边框的内边距由系统提供的背景图片设置，并且无法更改。避免这种情况的解决方案是不显式设置高度，在这种情况下系统将负责在正确位置显示边框，或者通过将 underlineColorAndroid 设置为透明来不显示边框。

¥TextInput has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

请注意，在 Android 上，在输入中执行文本选择可以将应用的活动 windowSoftInputMode 参数更改为 adjustResize。这可能会导致具有位置的组件出现问题：'absolute' 当键盘处于活动状态时。要避免此行为，请在 AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) 中指定 windowSoftInputMode 或使用原生代码以编程方式控制此参数。

¥Note that on Android performing text selection in an input can change the app's activity windowSoftInputMode param to adjustResize. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.

参考

¥Reference

属性​

¥Props

视图属性​

¥View Props

继承 视图属性。

¥Inherits View Props.

allowFontScaling​

指定字体是否应缩放以遵循文本大小辅助功能设置。默认为 true。

¥Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

类型
bool

autoCapitalize​

告诉 TextInput 自动将某些字符大写。某些键盘类型（例如 name-phone-pad）不支持此属性。

¥Tells TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad.

  • characters：所有字符。

    ¥characters: all characters.

  • words：每个单词的第一个字母。

    ¥words: first letter of each word.

  • sentences：每个句子的第一个字母（默认）。

    ¥sentences: first letter of each sentence (default).

  • none：不要自动大写任何东西。

    ¥none: don't auto capitalize anything.

类型
enum('none', 'sentences', 'words', 'characters')

autoComplete​

为系统指定自动补齐提示，以便它可以提供自动填充。在 Android 上，系统将始终尝试通过使用启发式方法来识别内容类型来提供自动填充。要禁用自动补齐，请将 autoComplete 设置为 off。

¥Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off.

以下值跨平台工作：

¥The following values work across platforms:

  • 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

以下值仅适用于 iOS：

¥The following values work on iOS only:

  • 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：

¥The following values work on Android only:

  • 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

类型
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。

¥If false, disables auto-correct. The default value is true.

类型
bool

autoFocus​

如果是 true，则将输入集中在 componentDidMount 或 useEffect 上。默认值为 false。

¥If true, focuses the input on componentDidMount or useEffect. The default value is false.

类型
bool

blurOnSubmit​

如果是 true，提交时文本字段将变得模糊。对于单行字段，默认值为 true；对于多行字段，默认值为 false。请注意，对于多行字段，将 blurOnSubmit 设置为 true 意味着按回车键将使字段模糊并触发 onSubmitEditing 事件，而不是在字段中插入换行符。

¥If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field.

类型
bool

caretHidden​

如果是 true，则隐藏插入符。默认值为 false。

¥If true, caret is hidden. The default value is false.

类型
bool

clearButtonMode
iOS
​

当清除按钮应出现在文本视图的右侧时。仅单行 TextInput 组件支持此属性。默认值为 never。

¥When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is never.

类型
enum('never', 'while-editing', 'unless-editing', 'always')

clearTextOnFocus
iOS
​

如果是 true，则在编辑开始时自动清除文本字段。

¥If true, clears the text field automatically when editing begins.

类型
bool

contextMenuHidden​

如果是 true，则隐藏上下文菜单。默认值为 false。

¥If true, context menu is hidden. The default value is false.

类型
bool

dataDetectorTypes
iOS
​

确定文本输入中转换为可单击 URL 的数据类型。仅当 multiline={true} 和 editable={false} 时有效。默认情况下不检测任何数据类型。

¥Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected.

你可以提供一种类型或多种类型的数组。

¥You can provide one type or an array of many types.

dataDetectorTypes 的可能值为：

¥Possible values for dataDetectorTypes are:

  • 'phoneNumber'

  • 'link'

  • 'address'

  • 'calendarEvent'

  • 'none'

  • 'all'

类型
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

defaultValue​

提供一个初始值，该值将在用户开始键入时更改。对于你不想处理监听事件和更新 value 属性以保持受控状态同步的用例很有用。

¥Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

类型
string

cursorColor
Android
​

如果提供，它将设置组件中光标（或 "caret"）的颜色。与 selectionColor 的行为不同，光标颜色的设置将独立于文本选择框的颜色。

¥When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box.

类型
color

disableFullscreenUI
Android
​

当 false 时，如果文本输入周围有少量可用空间（例如手机上的横向），操作系统可能会选择让用户在全屏文本输入模式内编辑文本。当 true 时，此功能被禁用，用户将始终直接在文本输入内部编辑文本。默认为 false。

¥When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false.

类型
bool

editable​

如果是 false，则文本不可编辑。默认值为 true。

¥If false, text is not editable. The default value is true.

类型
bool

enablesReturnKeyAutomatically
iOS
​

如果是 true，则键盘在没有文本时禁用返回键，在有文本时自动启用它。默认值为 false。

¥If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false.

类型
bool

enterKeyHint​

确定应向返回键显示哪些文本。优先于 returnKeyType 属性。

¥Determines what text should be shown to the return key. Has precedence over the returnKeyType prop.

以下值跨平台工作：

¥The following values work across platforms:

  • enter

  • done

  • next

  • search

  • send

仅限安卓

¥Android Only

以下值仅适用于 Android：

¥The following values work on Android only:

  • previous
类型
enum('enter', 'done', 'next', 'previous', 'search', 'send')

importantForAutofill
Android
​

告诉操作系统你的应用中的各个字段是否应包含在视图结构中，以便在 Android API 级别 26+ 上进行自动填充。可能的值为 auto、no、noExcludeDescendants、yes 和 yesExcludeDescendants。默认值为 auto。

¥Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are auto, no, noExcludeDescendants, yes, and yesExcludeDescendants. The default value is auto.

  • auto：让 Android 系统使用其启发式方法来确定视图对于自动填充是否重要。

    ¥auto: Let the Android System use its heuristics to determine if the view is important for autofill.

  • no：此视图对于自动填充并不重要。

    ¥no: This view isn't important for autofill.

  • noExcludeDescendants：该视图及其子视图对于自动填充并不重要。

    ¥noExcludeDescendants: This view and its children aren't important for autofill.

  • yes：此视图对于自动填充很重要。

    ¥yes: This view is important for autofill.

  • yesExcludeDescendants：此视图对于自动填充很重要，但它的子视图对于自动填充并不重要。

    ¥yesExcludeDescendants: This view is important for autofill, but its children aren't important for autofill.

类型
enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')

inlineImageLeft
Android
​

如果定义，提供的图片资源将渲染在左侧。图片资源必须位于 /android/app/src/main/res/drawable 内部并像这样引用

¥If defined, the provided image resource will be rendered on the left. The image resource must be inside /android/app/src/main/res/drawable and referenced like

<TextInput
 inlineImageLeft='search_icon'
/>
类型
string

inlineImagePadding
Android
​

内联图片（如果有）与文本输入本身之间的填充。

¥Padding between the inline image, if any, and the text input itself.

类型
number

inputAccessoryViewID
iOS
​

将自定义 InputAccessoryView 链接到此文本输入的可选标识符。当此文本输入获得焦点时，InputAccessoryView 将渲染在键盘上方。

¥An optional identifier which links a custom InputAccessoryView to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.

类型
string

inputMode​

与 HTML 中的 inputmode 属性类似，它决定打开哪个键盘，例如 numeric 优先于 keyboardType。

¥Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType.

支持以下值：

¥Support the following values:

  • none

  • text

  • decimal

  • numeric

  • tel

  • search

  • email

  • url

类型
enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url')

keyboardAppearance
iOS
​

确定键盘的颜色。

¥Determines the color of the keyboard.

类型
enum('default', 'light', 'dark')

keyboardType​

确定要打开的键盘，例如 numeric。

¥Determines which keyboard to open, e.g.numeric.

查看所有类型 此处 的屏幕截图。

¥See screenshots of all the types here.

以下值跨平台工作：

¥The following values work across platforms:

  • default

  • number-pad

  • decimal-pad

  • numeric

  • email-address

  • phone-pad

  • url

仅限 iOS

¥iOS Only

以下值仅适用于 iOS：

¥The following values work on iOS only:

  • ascii-capable

  • numbers-and-punctuation

  • name-phone-pad

  • twitter

  • web-search

仅限安卓

¥Android Only

以下值仅适用于 Android：

¥The following values work on Android only:

  • visible-password
类型
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 时字体可以达到的最大可能比例。可能的值：

¥Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:

  • null/undefined（默认）：从父节点继承或全局默认（0）

    ¥null/undefined (default): inherit from the parent node or the global default (0)

  • 0：无最大值，忽略父级/全局默认值

    ¥0: no max, ignore parent/global default

  • >= 1：将此节点的 maxFontSizeMultiplier 设置为此值

    ¥>= 1: sets the maxFontSizeMultiplier of this node to this value

类型
number

maxLength​

限制可以输入的最大字符数。使用这个而不是在 JS 中实现逻辑以避免闪烁。

¥Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.

类型
number

multiline​

如果是 true，则文本输入可以是多行。默认值为 false。

¥If true, the text input can be multiple lines. The default value is false.

注意

值得注意的是，这在 iOS 上将文本对齐到顶部，在 Android 上将其居中。将 textAlignVertical 设置为 top 时，可在两个平台中实现相同的行为。

¥It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.

类型
bool

numberOfLines
Android
​

设置 TextInput 的行数。将其与设置为 true 的多行一起使用，以便能够填充行。

¥Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.

类型
number

onBlur​

当文本输入模糊时调用的回调。

¥Callback that is called when the text input is blurred.

注意：如果你尝试从 nativeEvent 访问 text 值，请记住，你获得的结果值可能是 undefined，这可能会导致意外错误。如果你尝试查找 TextInput 的最后一个值，可以使用 onEndEditing 事件，该事件在编辑完成后触发。

¥Note: If you are attempting to access the text value from nativeEvent keep in mind that the resulting value you get can be undefined which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the onEndEditing event, which is fired upon completion of editing.

类型
function

onChange​

当文本输入的文本更改时调用的回调。

¥Callback that is called when the text input's text changes.

类型
({nativeEvent: {eventCount, target, text}}) => 无效

onChangeText​

当文本输入的文本更改时调用的回调。更改的文本作为单个字符串参数传递给回调处理程序。

¥Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.

类型
function

onContentSizeChange​

当文本输入的内容大小发生变化时调用的回调。

¥Callback that is called when the text input's content size changes.

仅调用多行文本输入。

¥Only called for multiline text inputs.

类型
({nativeEvent: {contentSize: {width, height} }}) => 无效

onEndEditing​

文本输入结束时调用的回调。

¥Callback that is called when text input ends.

类型
function

onPressIn​

进行触摸时调用的回调。

¥Callback that is called when a touch is engaged.

类型
({nativeEvent: PressEvent}) => void

onPressOut​

释放触摸时调用的回调。

¥Callback that is called when a touch is released.

类型
({nativeEvent: PressEvent}) => void

onFocus​

当文本输入获得焦点时调用的回调。

¥Callback that is called when the text input is focused.

类型
({nativeEvent: LayoutEvent}) => void

onKeyPress​

按下按键时调用的回调。这将使用对象来调用，其中 keyValue 是 'Enter' 或 'Backspace'（对于相应的键）以及键入的字符，否则包括 ' '（对于空格）。在 onChange 回调之前触发。注意：在 Android 上，仅处理软键盘的输入，而不处理硬件键盘的输入。

¥Callback that is called when a key is pressed. This will be called with object where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space. Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.

类型
({nativeEvent: {key: keyValue} }) => 无效

onLayout​

在安装和布局更改时调用。

¥Invoked on mount and on layout changes.

类型
({nativeEvent: LayoutEvent}) => void

onScroll​

在内容滚动时调用。还可能包含 ScrollEvent 中的其他属性，但在 Android 上，出于性能原因未提供 contentSize。

¥Invoked on content scroll. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.

类型
({nativeEvent: {contentOffset: {x, y} }}) => 无效

onSelectionChange​

当文本输入选择更改时调用的回调。

¥Callback that is called when the text input selection is changed.

类型
({nativeEvent: {selection: {start, end} }}) => 无效

onSubmitEditing​

按下文本输入的提交按钮时调用的回调。

¥Callback that is called when the text input's submit button is pressed.

类型
({nativeEvent: {text, eventCount, target}}) => 无效

请注意，在 iOS 上，使用 keyboardType="phone-pad" 时不会调用此方法。

¥Note that on iOS this method isn't called when using keyboardType="phone-pad".

placeholder​

输入文本之前将渲染的字符串。

¥The string that will be rendered before text input has been entered.

类型
string

placeholderTextColor​

占位符字符串的文本颜色。

¥The text color of the placeholder string.

类型
color

readOnly​

如果是 true，则文本不可编辑。默认值为 false。

¥If true, text is not editable. The default value is false.

类型
bool

returnKeyLabel
Android
​

将返回键设置为标签。使用它代替 returnKeyType。

¥Sets the return key to the label. Use it instead of returnKeyType.

类型
string

returnKeyType​

确定返回键的外观。在 Android 上，你还可以使用 returnKeyLabel。

¥Determines how the return key should look. On Android you can also use returnKeyLabel.

跨平台

¥Cross platform

以下值跨平台工作：

¥The following values work across platforms:

  • done

  • go

  • next

  • search

  • send

仅限安卓

¥Android Only

以下值仅适用于 Android：

¥The following values work on Android only:

  • none

  • previous

仅限 iOS

¥iOS Only

以下值仅适用于 iOS：

¥The following values work on iOS only:

  • default

  • emergency-call

  • google

  • join

  • route

  • yahoo

类型
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。

¥If true, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). The default value is true.

类型
bool

rows
Android
​

设置 TextInput 的行数。将其与设置为 true 的多行一起使用，以便能够填充行。

¥Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.

类型
number

scrollEnabled
iOS
​

如果是 false，文本视图的滚动将被禁用。默认值为 true。仅适用于 multiline={true}。

¥If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}.

类型
bool

secureTextEntry​

如果 true，文本输入会隐藏输入的文本，以便密码等敏感文本保持安全。默认值为 false。不适用于 multiline={true}。

¥If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with multiline={true}.

类型
bool

selection​

文本输入选择的开始和结束。将 start 和 end 设置为相同的值以定位光标。

¥The start and end of the text input's selection. Set start and end to the same value to position the cursor.

类型
目的：{start: number,end: number}

selectionColor​

文本输入的高亮、选择句柄和光标颜色。

¥The highlight, selection handle and cursor color of the text input.

类型
color

selectionHandleColor
Android
​

设置选择句柄的颜色。与 selectionColor 不同，它允许独立于选择的颜色自定义选择句柄颜色。

¥Sets the color of the selection handle. Unlike selectionColor, it allows the selection handle color to be customized independently of the selection's color.

类型
color

selectTextOnFocus​

如果是 true，所有文本将自动被选中。

¥If true, all text will automatically be selected on focus.

类型
bool

showSoftInputOnFocus​

当 false 时，当字段获得焦点时，它将阻止软键盘显示。默认值为 true。

¥When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true.

类型
bool

spellCheck
iOS
​

如果是 false，则禁用拼写检查样式（即红色下划线）。默认值继承自 autoCorrect。

¥If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect.

类型
bool

textAlign​

将输入文本与输入字段的左侧、中间或右侧对齐。

¥Align the input text to the left, center, or right sides of the input field.

textAlign 的可能值为：

¥Possible values for textAlign are:

  • left

  • center

  • right

类型
enum('left', 'center', 'right')

textContentType
iOS
​

向键盘和系统提供有关用户输入内容的预期语义的信息。

¥Give the keyboard and the system information about the expected semantic meaning for the content that users enter.

注意

autoComplete，提供相同的功能并且适用于所有平台。你可以将 Platform.select 用于不同的平台行为。

¥autoComplete, provides the same functionality and is available for all platforms. You can use Platform.select for differing platform behaviors.

避免同时使用 textContentType 和 autoComplete。为了向后兼容，当设置这两个属性时，textContentType 优先。

¥Avoid using both textContentType and autoComplete. For backwards compatibility, textContentType takes precedence when both properties are set.

你可以将 textContentType 设置为 username 或 password，以启用从设备密钥串自动填充登录详细信息。

¥You can set textContentType to username or password to enable autofill of login details from the device keychain.

newPassword 可用于指示用户可能想要保存在密钥串中的新密码输入，而 oneTimeCode 可用于指示可以通过 SMS 中到达的代码自动填充字段。

¥newPassword can be used to indicate a new password input the user may want to save in the keychain, and oneTimeCode can be used to indicate that a field can be autofilled by a code arriving in an SMS.

要禁用自动填充，请将 textContentType 设置为 none。

¥To disable autofill, set textContentType to none.

textContentType 的可能值为：

¥Possible values for textContentType are:

  • 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

类型
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 创建有效的字符串，请查看 苹果文档。

¥When using textContentType as newPassword on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for PasswordRules take a look to the Apple Docs.

如果未出现密码生成对话框，请确保：

¥If passwords generation dialog doesn't appear please make sure that:

  • 自动填充已启用：设置 → 密码和账户 → 切换 "在" 自动填充密码，

    ¥AutoFill is enabled: Settings → Passwords & Accounts → toggle "On" the AutoFill Passwords,

  • iCloud 密钥链使用：设置 → Apple ID → iCloud → Keychain → 切换 "在" iCloud Keychain。

    ¥iCloud Keychain is used: Settings → Apple ID → iCloud → Keychain → toggle "On" the iCloud Keychain.

类型
string

style​

请注意，并非所有文本样式都受支持，不完整的不支持列表包括：

¥Note that not all Text styles are supported, an incomplete list of what is not supported includes:

  • borderLeftWidth

  • borderTopWidth

  • borderRightWidth

  • borderBottomWidth

  • borderTopLeftRadius

  • borderTopRightRadius

  • borderBottomRightRadius

  • borderBottomLeftRadius

样式

¥Styles

类型
Text

textBreakStrategy
Android
​

在 Android API Level 23+ 上设置文本分隔策略，可能的值为 simple、highQuality、balanced。默认值为 highQuality。

¥Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is highQuality.

类型
enum('simple', 'highQuality', 'balanced')

underlineColorAndroid
Android
​

TextInput 下划线的颜色。

¥The color of the TextInput underline.

类型
color

value​

为文本输入显示的值。TextInput 是一个受控组件，这意味着如果提供的话，原生值将被迫匹配此 value 属性。对于大多数用途，这效果很好，但在某些情况下这可能会导致闪烁 - 一个常见的原因是通过保持值相同来防止编辑。除了设置相同的值之外，还可以设置 editable={false} 或设置/更新 maxLength 以防止不必要的编辑而不闪烁。

¥The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

类型
string

lineBreakStrategyIOS
iOS
​

在 iOS 14+ 上设置换行策略。可能的值为 none、standard、hangul-word 和 push-out。

¥Set line break strategy on iOS 14+. Possible values are none, standard, hangul-word and push-out.

类型默认
enum('none', 'standard', 'hangul-word', 'push-out')'none'

方法​

¥Methods

.focus()​

focus();

使原生输入请求成为焦点。

¥Makes the native input request focus.

.blur()​

blur();

使原生输入失去焦点。

¥Makes the native input lose focus.

clear()​

clear();

删除 TextInput 中的所有文本。

¥Removes all text from the TextInput.

isFocused()​

isFocused(): boolean;

如果输入当前获得焦点，则返回 true；否则为 false。

¥Returns true if the input is currently focused; false otherwise.

已知的问题

¥Known issues

  • React Native#19096：不支持 Android 的 onKeyPreIme。

    ¥react-native#19096: Doesn't support Android's onKeyPreIme.

  • React Native#19366：通过后退按钮关闭 Android 键盘后调用 .focus() 不会再次调出键盘。

    ¥react-native#19366: Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.

  • React Native#26799：不支持 Android 的 secureTextEntry、keyboardType="email-address" 或 keyboardType="phone-pad"。

    ¥react-native#26799: Doesn't support Android's secureTextEntry when keyboardType="email-address" or keyboardType="phone-pad".