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ā)生變化時(shí)，就會調(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)容時(shí)，這個(gè)內(nèi)容就會通過onChangeText的參數(shù)text傳遞回來，在onChangeText中將text的內(nèi)容保存到state中。當(dāng)我們點(diǎn)擊Button時(shí)，通過Alert將state中保存的內(nèi)容展現(xiàn)出來。
運(yùn)行程序效果如下圖所示。
在輸入框中輸入android，點(diǎn)擊搜索Button，可以看到輸入的Android展示到了Alert中。
2.2 onChange
當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，也會調(diào)用onChange，只不過它所返回的參數(shù)是一個(gè)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，文本框會在按下提交鍵時(shí)失去焦點(diǎn)。對于單行輸入框，blurOnSubmit默認(rèn)值為true，多行則為false。
在單行的情況下，點(diǎn)擊鍵盤上的提交按鈕時(shí)，TextInput的效果如下圖所示。
將blurOnSubmit設(shè)置為false：
...
<TextInput style={styles.input} placeholder='請輸入內(nèi)容' blurOnSubmit={false}
onChangeText={(text) => {
this.setState({searchText: text});
}}/>
...
點(diǎn)擊鍵盤上的提交按鈕時(shí)，TextInput的效果如下圖所示。
2.5 onSubmitEditing
當(dāng)提交鍵被按下時(shí)會調(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，這時(shí)我們輸入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時(shí)，效果如下圖所示。
returnKeyType設(shè)置為send時(shí)，效果如下圖所示。
2.7 其他跨平臺屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| autoCapitalize | enum(‘none', ‘sentences', ‘words', ‘characters') | 設(shè)置英文字母自動大寫規(guī)則，取值分別表示：不自動大寫、每句話首字母自動大寫、每個(gè)單詞首字母大寫、全部字母自動大寫 |
| autoCorrect | bool | 是否會自動檢測用戶輸入的英語單詞正確性，默認(rèn)值為true |
| autoFocus | bool | 如果為true，在componentDidMount后會獲得焦點(diǎn)。默認(rèn)值為false。 |
| defaultValue | string | 字符初始值，當(dāng)用戶開始輸入時(shí)，該值將改變 |
| 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)時(shí)，組件中的內(nèi)容會被自動選中 |
| onFocus | function | 當(dāng)文本框獲得焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù) |
| onEndEditing | function | 當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù) |
| onLayout | function | 當(dāng)組件掛載或者布局變化的時(shí)候調(diào)用，參數(shù)為{x, y, width, height} |
| onScroll | function | 在內(nèi)容滾動時(shí)持續(xù)調(diào)用，傳回參數(shù)的格式形如{ nativeEvent: { contentOffset: { x, y } } } |
| onSelectionChange | function | 長按選擇文本時(shí)，選擇范圍變化時(shí)調(diào)用此函數(shù)，傳回參數(shù)的格式形如 { nativeEvent: { selection: { start, end } } } |
| value | string | 文本框中的文字內(nèi)容 |
2.8 Android平臺獨(dú)有屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| inlineImageLeft | string | 指定一個(gè)圖片放置在左側(cè) |
| inlineImagePadding | number | 左側(cè)圖片的Padding(如果有的話)，以及文本框本身的Padding |
| numberOfLines | number | TextInput的行數(shù) |
| underlineColorAndroid | string | TextInput的下劃線顏色 |
| returnKeyLabel | string | 設(shè)置軟鍵盤回車鍵的內(nèi)容，優(yōu)先級高于returnKeyType |
| disableFullscreenUI | bool | 值為false時(shí)(默認(rèn)值)，如果TextInput的輸入空間小，系統(tǒng)可能會進(jìn)入全屏文本輸入模式 |
2.9 iOS平臺獨(dú)有屬性
| 屬性名 | 取值 | 說明 |
|---|---|---|
| clearButtonMode | enum(‘never', ‘while-editing', ‘unless-editing', ‘a(chǎn)lways') | 何時(shí)在文本框右側(cè)顯示清除按鈕 |
| clearTextOnFocus | bool | 如果為true，每次開始輸入的時(shí)候都會清除文本框的內(nèi)容 |
| keyboardAppearance | enum(‘default', ‘light', ‘dark') | 鍵盤的顏色 |
| onKeyPress | function | 一個(gè)鍵被按下的時(shí)候調(diào)用此回調(diào)，傳遞給回調(diào)函數(shù)的參數(shù)為{ nativeEvent: { key: keyValue } } |
| spellCheck | bool | 如果為false，則禁用拼寫檢查的樣式（比如紅色下劃線） |
| enablesReturnKeyAutomatically | bool | 如果為true，鍵盤會在文本框內(nèi)沒有文字的時(shí)候禁用確認(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)擊“清除”按鈕時(shí)，文本框中的內(nèi)容就會被清除。
isFocused(): boolean
返回值表明當(dāng)前輸入框是否獲得了焦點(diǎn)。
好了，到這里TextInput組件就介紹到這里，還有一些沒有列出的屬性請查看官方文檔。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了antd+react中upload手動上傳單限制上傳一張，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
這篇文章主要為大家詳細(xì)介紹了如何基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
高階組件也就是我們常說的HOC,是React中用于復(fù)用組件邏輯的一種高級技巧。這篇文章主要通過一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對大家有所幫助2023-04-04
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)評論的添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
用React實(shí)現(xiàn)一個(gè)類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實(shí)現(xiàn)一個(gè)類 chatGPT 的交互式問答組件的方法，文中有詳細(xì)的代碼示例，對我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了React錯(cuò)誤用法習(xí)慣分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
關(guān)于React16.0的componentDidCatch方法解讀
這篇文章主要介紹了關(guān)于React16.0的componentDidCatch方法解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
本篇文章主要介紹了react-native之ART繪圖方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了React中組件之間通信的方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
React+hook實(shí)現(xiàn)聯(lián)動模糊搜索
這篇文章主要為大家詳細(xì)介紹了如何利用React+hook+antd實(shí)現(xiàn)聯(lián)動模糊搜索功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02