【React Native】文件翻譯閱讀紀錄 - Components(組件) - TextInput

by - 上午9:00

Facebook Open Source React Native
TextInput



用於通過鍵盤將文本輸入應用程序的基礎組件。道具為多個功能提供可配置性，例如自動更正，自動大寫，佔位符文本和不同的鍵盤類型，例如數字小鍵盤。

 最簡單的用例是刪除TextInput並訂閱onChangeText事件以讀取用戶輸入。還有其他事件，例如可以訂閱的onSubmitEditing和onFocus。一個簡單的例子：



通過本機元素公開的兩個方法是.focus（）和.blur（），它們將以編程方式聚焦或模糊TextInput。

 請注意，某些道具僅適用於 multiline = {true / false}。此外，如果 multiline = false，則不會應用僅應用於元素一側的邊框樣式（例如，borderBottomColor，borderLeftWidth 等）。要實現相同的效果，可以將 TextInput 包裝在View中：
TextInput默認情況下在其視圖底部有一個邊框。此邊框的填充由系統提供的背景圖像設置，無法更改。避免這種情況的解決方案是要么不明確地設置高度，系統將負責在正確的位置顯示邊框，或者通過將underlineColorAndroid設置為透明來不顯示邊框。

 請注意，在Android上執行輸入中的文本選擇可以將應用程序的活動windowSoftInputMode參數更改為adjustResize。當鍵盤處於活動狀態時，這可能會導致位置為“絕對”的組件出現問題。要避免此行為，請在AndroidManifest.xml（https://developer.android.com/guide/topics/manifest/activity-element.html）中指定windowSoftInputMode，或使用本機代碼以編程方式控制此參數。

Props

Methods

參考

Props

allowFontScaling

指定字體是否應縮放以遵循“文本大小”輔助功能設置。默認值為true。
TYPEREQUIRED
boolNo

autoCapitalize

可以告訴 TextInput 自動將某些字符大寫。
  • characters: 所有字符。
  • words: 每個單詞的第一個字母。
  • sentences: 每個句子的第一個字母（默認）。
  • none: 不要自動大寫任何東西。
TYPEREQUIRED
enum('none', 'sentences', 'words', 'characters')No

autoCorrect

如果為 false，則禁用自動更正。默認值是true。
TYPEREQUIRED
boolNo

autoFocus

如果為 true，則將輸入集中在 componentDidMount 上。默認值為false。
TYPEREQUIRED
boolNo

blurOnSubmit

如果為 true，則提交時文本字段將模糊。單行字段的默認值為 true，多行字段的默認值為 false。請注意，對於多行字段，將 blurOnSubmit 設置為 true 意味著按下return 會使字段模糊並觸發 onSubmitEditing 事件，而不是在字段中插入換行符。
TYPEREQUIRED
boolNo

caretHidden

如果是真的，就會隱藏插入符號。默認值為false。
TYPEREQUIRED
boolNo

clearButtonMode

清除按鈕應出現在文本視圖的右側。僅對單行TextInput組件支持此屬性。
TYPEREQUIREDPLATFORM
enum('never', 'while-editing', 'unless-editing', 'always')NoiOS

clearTextOnFocus

如果為true，則在編輯開始時自動清除文本字段。
TYPEREQUIREDPLATFORM
boolNoiOS

contextMenuHidden

如果為true，則隱藏上下文菜單。默認值為false。
TYPEREQUIRED
boolNo

dataDetectorTypes

確定在文本輸入中轉換為可單擊URL的數據類型。僅在multiline = {true}和editable = {false}時有效。默認情況下，未檢測到任何數據類型
您可以提供一種類型或多種類型的數組。
dataDetectorTypes 的可能值為：
  • 'phoneNumber'
  • 'link'
  • 'address'
  • 'calendarEvent'
  • 'none'
  • 'all'
TYPEREQUIREDPLATFORM
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')NoiOS

defaultValue

提供在用戶開始鍵入時將更改的初始值。對於您不想處理事件監聽和更新值prop以保持受控狀態同步的簡單用例非常有用。
TYPEREQUIRED
stringNo

disableFullscreenUI

如果為假，如果在文本輸入周圍存在少量可用空間（例如，電話上的橫向），則OS可以選擇讓用戶在全屏文本輸入模式內編輯文本。如果為true，則禁用此功能，用戶將始終直接在文本輸入內編輯文本。默認為false。
TYPEREQUIREDPLATFORM
boolNoAndroid

editable

如果為false，則文本不可編輯。默認值是true。
TYPEREQUIRED
boolNo

enablesReturnKeyAutomatically

如果為true，則鍵盤在沒有文本時禁用返回鍵，並在有文本時自動啟用它。默認值為false。
TYPEREQUIREDPLATFORM
boolNoiOS

inlineImageLeft

如果已定義，則提供的圖像資源將在左側呈現。圖像資源必須位於/ android / app / src / main / res / drawable中並且引用為
<TextInput
 inlineImageLeft='search_icon'
/>
TYPEREQUIREDPLATFORM
stringNoAndroid

inlineImagePadding

內聯圖像（如果有）和文本輸入本身之間的填充。
TYPEREQUIREDPLATFORM
numberNoAndroid

keyboardAppearance

確定鍵盤的顏色。
TYPEREQUIREDPLATFORM
enum('default', 'light', 'dark')NoiOS

keyboardType

確定要打開的鍵盤，例如數字。
以下值適用於各種平台：
  • default
  • number-pad
  • decimal-pad
  • numeric
  • email-address
  • phone-pad
僅適用於 iOS
以下值僅適用於iOS：
  • ascii-capable
  • numbers-and-punctuation
  • url
  • name-phone-pad
  • twitter
  • web-search
僅適用於 Android
以下值僅適用於Android：
  • visible-password
TYPEREQUIRED
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')No

maxLength

限制可輸入的最大字符數。使用它而不是在JS中實現邏輯以避免閃爍。
TYPEREQUIRED
numberNo

multiline

如果為true，則文本輸入可以是多行。默認值為false。
TYPEREQUIRED
boolNo

numberOfLines

設置TextInput的行數。使用多線設置為true可以填充線條。
TYPEREQUIREDPLATFORM
numberNoAndroid

onBlur

Callback that is called when the text input is blurred.
TYPEREQUIRED
functionNo

onChange

文本輸入模糊時調用的回調。
TYPEREQUIRED
functionNo

onChangeText

文本輸入文本更改時調用的回調。更改的文本作為參數傳遞給回調處理程序。

TYPEREQUIRED
functionNo

onContentSizeChange

文本輸入的內容大小更改時調用的回調。這將使用{nativeEvent：{contentSize：{width，height}}}調用。

 僅調用多行文本輸入。
TYPEREQUIRED
functionNo

onEndEditing

文本輸入結束時調用的回調。
TYPEREQUIRED
functionNo

onFocus

調整文本輸入時調用的回調。
TYPEREQUIRED
functionNo

onKeyPress

按下某個鍵時調用的回調。這將使用{nativeEvent：{key：keyValue}}調用，其中keyValue為各個鍵的“Enter”或“Backspace”以及鍵入的字符，否則包括“for space”。在onChange回調之前觸發。注意：在Android上只處理來自軟鍵盤的輸入，而不是硬件鍵盤輸入。
TYPEREQUIRED
functionNo

onLayout

使用{x，y，width，height}調整安裝和佈局更改。
TYPEREQUIRED
functionNo

onScroll

使用{nativeEvent：{contentOffset：{x，y}}}在內容滾動上調用。也可能包含ScrollEvent中的其他屬性，但出於性能原因，未提供Android contentSize。
TYPEREQUIRED
functionNo

onSelectionChange

更改文本輸入選擇時調用的回調。這將使用{nativeEvent：{selection：{start，end}}}調用。
TYPEREQUIRED
functionNo

onSubmitEditing

按下文本輸入的提交按鈕時調用的回調。如果指定了multiline = {true}，則無效。
TYPEREQUIRED
functionNo

placeholder

輸入文本輸入之前將呈現的字符串。
TYPEREQUIRED
stringNo

placeholderTextColor

佔位符字符串的文本顏色。
TYPEREQUIRED
colorNo

returnKeyLabel

設置標籤的返回鍵。使用它而不是 returnKeyType。
TYPEREQUIREDPLATFORM
stringNoAndroid

returnKeyType

確定返回鍵的外觀。在Android上，您還可以使用returnKeyLabel。

 跨平台

 以下值適用於各種平台：
  • done
  • go
  • next
  • search
  • send
Android僅限

 以下值僅適用於Android：
  • none
  • previous
僅適用於iOS

 以下值僅適用於iOS：
  • default
  • emergency-call
  • google
  • join
  • route
  • yahoo
TYPEREQUIRED
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')No

secureTextEntry

如果為true，則文本輸入會模糊輸入的文本，以便密碼等敏感文本保持安全。默認值為false。不適用於'multiline = {true}'。
TYPEREQUIRED
boolNo

selection

文本輸入選擇的開始和結束。將start和end設置為相同的值以定位光標。
TYPEREQUIRED
object: {start: number,end: number}No

selectionColor

文本輸入的高亮和光標顏色。

TYPEREQUIRED
colorNo

selectionState

DocumentSelectionState 的一個實例，這是一個負責維護文檔選擇信息的狀態。

 可以使用此實例執行的某些功能是：
  • blur()
  • focus()
  • update()
您可以在 vendor/document/selection/DocumentSelectionState.js 中引用DocumentSelectionState
TYPEREQUIREDPLATFORM
DocumentSelectionStateNoiOS

selectTextOnFocus

如果為true，則將在焦點上自動選擇所有文本。
TYPEREQUIRED
boolNo

spellCheck

如果為false，則禁用拼寫檢查樣式（即紅色下劃線）。默認值從autoCorrect繼承。
TYPEREQUIREDPLATFORM
boolNoiOS

textContentType

為鍵盤和系統提供有關用戶輸入內容的預期語義含義的信息。

 對於iOS 11+，您可以將 textContentType 設置為用戶名或密碼，以啟用從設備鑰匙串自動填充登錄詳細信息。

 要禁用自動填充，請將 textContentType 設置為 none。

 textContentType 的可能值為：
  • none
  • URL
  • addressCity
  • addressCityAndState
  • addressState
  • countryName
  • creditCardNumber
  • emailAddress
  • familyName
  • fullStreetAddress
  • givenName
  • jobTitle
  • location
  • middleName
  • name
  • namePrefix
  • nameSuffix
  • nickname
  • organizationName
  • postalCode
  • streetAddressLine1
  • streetAddressLine2
  • sublocality
  • telephoneNumber
  • username
  • password
TYPEREQUIREDPLATFORM
enum('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password')NoiOS

style

請注意，並非所有文本樣式都受支持，不支持的不完整列表包括：
  • borderLeftWidth
  • borderTopWidth
  • borderRightWidth
  • borderBottomWidth
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomRightRadius
  • borderBottomLeftRadius
see Issue#7070 for more detail.
TYPEREQUIRED
TextNo

textBreakStrategy

在Android API Level 23+上設置文本中斷策略，可能的值很簡單 simple, highQuality, balanced 默認值 simple.
TYPEREQUIREDPLATFORM
enum('simple', 'highQuality', 'balanced')NoAndroid

underlineColorAndroid

TextInput 下劃線的顏色。
TYPEREQUIREDPLATFORM
colorNoAndroid

value

要為文本輸入顯示的值。 TextInput是一個受控組件，這意味著如果提供的話，將強製本機值與此值prop匹配。對於大多數用途，這很有效，但在某些情況下，這可能會導致閃爍 - 一個常見原因是通過保持值相同來阻止編輯。除了簡單地設置相同的值之外，還可以設置editable = {false}，或設置/更新maxLength以防止不需要的編輯而不閃爍。
TYPEREQUIRED
stringNo

Methods

clear()

clear();
從 TextInput 中刪除所有文本。

isFocused()

isFocused():
如果輸入當前是聚焦的，則返回true;否則是假的。


Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , , ,

You May Also Like

0 意見