React Native之TextInput組件解析示例
1 概述
TextInput組件和Text組件類似，內(nèi)部都沒有使用FlexBox布局，不同的是TextInput組件支持文字的輸入，因?yàn)橹С治淖州斎耄?TextInput組件要比Text組件多了一些屬性和方法。TextInput組件支持Text組件所有的Style屬性，而TextInput組件本身是沒有特有的Style屬性的。
2 屬性
TextInput組件支持所有的View組件的屬性，除此之外，它還有許多其他屬性。
2.1 onChangeText
當(dāng)輸入框的內(nèi)容發(fā)生變化時，就會調(diào)用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='請輸入內(nèi)容'
onChangeText={(text) => {
this.setState({searchText: text});
}}/>
<Button style={styles.button} title='搜索'
onPress={ () => {
Alert.alert('輸入的內(nèi)容為:' + 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屬性，當(dāng)我們在TextInput中輸入內(nèi)容時，這個內(nèi)容就會通過onChangeText的參數(shù)text傳遞回來，在onChangeText中將text的內(nèi)容保存到state中。當(dāng)我們點(diǎn)擊Button時，通過Alert將state中保存的內(nèi)容展現(xiàn)出來。
運(yùn)行程序效果如下圖所示。
在輸入框中輸入android，點(diǎn)擊搜索Button，可以看到輸入的Android展示到了Alert中。
2.2 onChange
當(dāng)輸入框的內(nèi)容發(fā)生變化時，也會調(diào)用onChange，只不過它所返回的參數(shù)是一個event，我們來改寫2.1的代碼：
...
<TextInput style={styles.input} placeholder='請輸入內(nèi)容' keyboardType='default'
onChange={(event) => {
this.setState({searchText: event.nativeEvent.text});
}}/>
...
通過event.nativeEvent.text可以得到用戶輸入的內(nèi)容，如果只是想要得到用戶輸入的內(nèi)容，還是用onChangeText比較合適。
2.3 keyboardType
keyboardType用于設(shè)置彈出軟鍵盤的類型。它的取值為范圍為： enum(‘default', ‘email-address', ‘numeric', ‘phone-pad', ‘a(chǎn)scii-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='請輸入內(nèi)容' keyboardType='phone-pad'
onChangeText={(text) => {
this.setState({searchText: text});
}}/>
...
將keyboardType的值設(shè)置為phone-pad，效果如下圖所示。
2.4 blurOnSubmit
如果blurOnSubmit值為true，文本框會在按下提交鍵時失去焦點(diǎn)。對于單行輸入框，blurOnSubmit默認(rèn)值為true，多行則為false。
在單行的情況下，點(diǎn)擊鍵盤上的提交按鈕時，TextInput的效果如下圖所示。
將blurOnSubmit設(shè)置為false：
...
<TextInput style={styles.input} placeholder='請輸入內(nèi)容' blurOnSubmit={false}
onChangeText={(text) => {
this.setState({searchText: text});
}}/>
...
點(diǎn)擊鍵盤上的提交按鈕時，TextInput的效果如下圖所示。
2.5 onSubmitEditing
當(dāng)提交鍵被按下時會調(diào)用onSubmitEditing，如果multiline等于true，則此屬性不可用。
...
<TextInput style={styles.input} placeholder='請輸入內(nèi)容' blurOnSubmit={true} multiline={false}
onChangeText={(text) => {
this.setState({searchText: text});
}}
onSubmitEditing={(event) => {
console.log(event.nativeEvent.text);
}}
/>
...
運(yùn)行程序并在App的開發(fā)菜單中選擇Debug JS Remotely，這時我們輸入Android并按下提交鍵，在Console控制臺中就會輸出結(jié)果。（筆者用的是WebStorm）
2.6 returnKeyType
用于設(shè)置軟鍵盤回車鍵的樣式，Android平臺可以使用returnKeyLabel來設(shè)置軟鍵盤回車鍵的內(nèi)容。
returnKeyType的取值為enum(‘done', ‘Go', ‘next', ‘search', ‘send', ‘none', ‘previous', ‘default', ‘emergency-call', ‘google', ‘join', ‘route', ‘yahoo')。
其中跨平臺的取值有：done、next、search、send。
Android平臺獨(dú)有：none、previous。
iOS平臺獨(dú)有：default、emergency-call、google、join、route、yahoo。
如果我們將returnKeyType設(shè)置為go時，效果如下圖所示。
returnKeyType設(shè)置為send時，效果如下圖所示。
2.7 其他跨平臺屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| autoCapitalize | enum(‘none', ‘sentences', ‘words', ‘characters') | 設(shè)置英文字母自動大寫規(guī)則，取值分別表示：不自動大寫、每句話首字母自動大寫、每個單詞首字母大寫、全部字母自動大寫 |
| autoCorrect | bool | 是否會自動檢測用戶輸入的英語單詞正確性，默認(rèn)值為true |
| autoFocus | bool | 如果為true，在componentDidMount后會獲得焦點(diǎn)。默認(rèn)值為false。 |
| defaultValue | string | 字符初始值，當(dāng)用戶開始輸入時，該值將改變 |
| placeholder | node | 文本輸入之前將呈現(xiàn)的字符串，多用于提示用戶應(yīng)該輸入什么 |
| placeholderTextColor | color | 文本輸入之前將呈現(xiàn)的字符串的顏色 |
| editable | bool | 是否允許修改字符，默認(rèn)值為true |
| maxLength | number | 最多允許用戶輸入多少字符 |
| caretHidden | bool | 如果為true，則隱藏光標(biāo) |
| multiline | bool | 如果為true，則文本輸入可以是多行的，默認(rèn)值為false |
| secureTextEntry | bool | 文本框是否用于輸入密碼，默認(rèn)值為false |
| selectTextOnFocus | bool | 如果為true，則文本框獲取焦點(diǎn)時，組件中的內(nèi)容會被自動選中 |
| onFocus | function | 當(dāng)文本框獲得焦點(diǎn)的時候調(diào)用此回調(diào)函數(shù) |
| onEndEditing | function | 當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù) |
| onLayout | function | 當(dāng)組件掛載或者布局變化的時候調(diào)用，參數(shù)為{x, y, width, height} |
| onScroll | function | 在內(nèi)容滾動時持續(xù)調(diào)用，傳回參數(shù)的格式形如{ nativeEvent: { contentOffset: { x, y } } } |
| onSelectionChange | function | 長按選擇文本時，選擇范圍變化時調(diào)用此函數(shù)，傳回參數(shù)的格式形如 { nativeEvent: { selection: { start, end } } } |
| value | string | 文本框中的文字內(nèi)容 |
2.8 Android平臺獨(dú)有屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| inlineImageLeft | string | 指定一個圖片放置在左側(cè) |
| inlineImagePadding | number | 左側(cè)圖片的Padding(如果有的話)，以及文本框本身的Padding |
| numberOfLines | number | TextInput的行數(shù) |
| underlineColorAndroid | string | TextInput的下劃線顏色 |
| returnKeyLabel | string | 設(shè)置軟鍵盤回車鍵的內(nèi)容，優(yōu)先級高于returnKeyType |
| disableFullscreenUI | bool | 值為false時(默認(rèn)值)，如果TextInput的輸入空間小，系統(tǒng)可能會進(jìn)入全屏文本輸入模式 |
2.9 iOS平臺獨(dú)有屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| clearButtonMode | enum(‘never', ‘while-editing', ‘unless-editing', ‘a(chǎn)lways') | 何時在文本框右側(cè)顯示清除按鈕 |
| clearTextOnFocus | bool | 如果為true，每次開始輸入的時候都會清除文本框的內(nèi)容 |
| keyboardAppearance | enum(‘default', ‘light', ‘dark') | 鍵盤的顏色 |
| onKeyPress | function | 一個鍵被按下的時候調(diào)用此回調(diào)，傳遞給回調(diào)函數(shù)的參數(shù)為{ nativeEvent: { key: keyValue } } |
| spellCheck | bool | 如果為false，則禁用拼寫檢查的樣式（比如紅色下劃線） |
| enablesReturnKeyAutomatically | bool | 如果為true，鍵盤會在文本框內(nèi)沒有文字的時候禁用確認(rèn)按鈕 ，默認(rèn)值為false |
3 方法
clear()
clear用于清空輸入框的內(nèi)容。
想要使用組件的方法則需要使用組件的引用，例子如下所示。
...
render() {
return (
<View style={styles.container}>
<View style={styles.searchBar}>
<TextInput style={styles.input} ref="textInputRefer" placeholder='請輸入內(nèi)容' blurOnSubmit={true}
returnKeyType='send'
onChangeText={(text) => {
this.setState({searchText: text});
}}
/>
<Button style={styles.button} title='清除'
onPress={ () => {
this.refs.textInputRefer.clear();
}
}/>
</View>
</View>
);
}
...
在TextInput標(biāo)簽中定義引用的名稱：ref="textInputRefer"，這樣我們通過 this.refs.textInputRefer就可以得到TextInput 組件的引用。在Button的onPress函數(shù)中，調(diào)用了TextInput的clear方法，這樣當(dāng)我們點(diǎn)擊“清除”按鈕時，文本框中的內(nèi)容就會被清除。
isFocused(): boolean
返回值表明當(dāng)前輸入框是否獲得了焦點(diǎn)。
好了，到這里TextInput組件就介紹到這里，還有一些沒有列出的屬性請查看官方文檔。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vant2 自動檢查表單驗(yàn)證 -validate
這篇文章主要介紹了vant2 自動檢查表單驗(yàn)證 -validate,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了React前端DOM常見Hook封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react實(shí)現(xiàn)Radio組件的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了在React中this容易遇到的問題總結(jié)，文中有詳細(xì)的示例代碼，希望對大家有一定的幫助,需要的朋友可以參考下2023-05-05
React 中的事件，是對原生事件的封裝，叫做合成事件。這篇文章主要通過幾個簡單的示例為大家詳細(xì)介紹一下React中的合成事件，感興趣的可以了解一下2023-02-02
react中使用js實(shí)現(xiàn)頁面滾動監(jiān)聽(推薦)
這篇文章主要介紹了react中使用js實(shí)現(xiàn)頁面滾動監(jiān)聽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
本篇文章主要介紹了react-router實(shí)現(xiàn)按需加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹了React翻頁器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧2023-01-01
從零搭建Webpack5-react腳手架的實(shí)現(xiàn)步驟(附源碼)
本文主要介紹了從零搭建Webpack5-react腳手架的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08