React Native之TextInput組件解析示例

1 概述

TextInput組件和Text組件類似，內(nèi)部都沒(méi)有使用FlexBox布局，不同的是TextInput組件支持文字的輸入，因?yàn)橹С治淖州斎耄?TextInput組件要比Text組件多了一些屬性和方法。TextInput組件支持Text組件所有的Style屬性，而TextInput組件本身是沒(méi)有特有的Style屬性的。

2 屬性

TextInput組件支持所有的View組件的屬性，除此之外，它還有許多其他屬性。

2.1 onChangeText

當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，就會(huì)調(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='請(qǐng)輸入內(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)我們?cè)赥extInput中輸入內(nèi)容時(shí)，這個(gè)內(nèi)容就會(huì)通過(guò)onChangeText的參數(shù)text傳遞回來(lái)，在onChangeText中將text的內(nèi)容保存到state中。當(dāng)我們點(diǎn)擊Button時(shí)，通過(guò)Alert將state中保存的內(nèi)容展現(xiàn)出來(lái)。

運(yùn)行程序效果如下圖所示。

在輸入框中輸入android，點(diǎn)擊搜索Button，可以看到輸入的Android展示到了Alert中。

2.2 onChange

當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，也會(huì)調(diào)用onChange，只不過(guò)它所返回的參數(shù)是一個(gè)event，我們來(lái)改寫2.1的代碼：

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' keyboardType='default'
 onChange={(event) => {
 this.setState({searchText: event.nativeEvent.text});
 }}/>
... 
 

通過(guò)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是跨平臺(tái)。

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' keyboardType='phone-pad'
 onChangeText={(text) => {
 this.setState({searchText: text}); 
 }}/>
... 

將keyboardType的值設(shè)置為phone-pad，效果如下圖所示。

2.4 blurOnSubmit

如果blurOnSubmit值為true，文本框會(huì)在按下提交鍵時(shí)失去焦點(diǎn)。對(duì)于單行輸入框，blurOnSubmit默認(rèn)值為true，多行則為false。

在單行的情況下，點(diǎn)擊鍵盤上的提交按鈕時(shí)，TextInput的效果如下圖所示。

將blurOnSubmit設(shè)置為false：

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' blurOnSubmit={false} 
 onChangeText={(text) => {
 this.setState({searchText: text});
 }}/>
... 

點(diǎn)擊鍵盤上的提交按鈕時(shí)，TextInput的效果如下圖所示。

2.5 onSubmitEditing

當(dāng)提交鍵被按下時(shí)會(huì)調(diào)用onSubmitEditing，如果multiline等于true，則此屬性不可用。

...
 <TextInput style={styles.input} placeholder='請(qǐng)輸入內(nèi)容' blurOnSubmit={true} multiline={false}
 onChangeText={(text) => {
 this.setState({searchText: text});
 }}
 onSubmitEditing={(event) => {
 console.log(event.nativeEvent.text);
 }}
 />
... 

運(yùn)行程序并在App的開(kāi)發(fā)菜單中選擇Debug JS Remotely，這時(shí)我們輸入Android并按下提交鍵，在Console控制臺(tái)中就會(huì)輸出結(jié)果。（筆者用的是WebStorm）

2.6 returnKeyType

用于設(shè)置軟鍵盤回車鍵的樣式，Android平臺(tái)可以使用returnKeyLabel來(lái)設(shè)置軟鍵盤回車鍵的內(nèi)容。

returnKeyType的取值為enum(‘done', ‘Go', ‘next', ‘search', ‘send', ‘none', ‘previous', ‘default', ‘emergency-call', ‘google', ‘join', ‘route', ‘yahoo')。

其中跨平臺(tái)的取值有：done、next、search、send。

Android平臺(tái)獨(dú)有：none、previous。

iOS平臺(tái)獨(dú)有：default、emergency-call、google、join、route、yahoo。

如果我們將returnKeyType設(shè)置為go時(shí)，效果如下圖所示。

returnKeyType設(shè)置為send時(shí)，效果如下圖所示。

2.7 其他跨平臺(tái)屬性

2.8 Android平臺(tái)獨(dú)有屬性

2.9 iOS平臺(tái)獨(dú)有屬性

3 方法

clear()

clear用于清空輸入框的內(nèi)容。

想要使用組件的方法則需要使用組件的引用，例子如下所示。

...
render() {
 return (
 <View style={styles.container}>
 <View style={styles.searchBar}>
 <TextInput style={styles.input} ref="textInputRefer" placeholder='請(qǐng)輸入內(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"，這樣我們通過(guò) this.refs.textInputRefer就可以得到TextInput 組件的引用。在Button的onPress函數(shù)中，調(diào)用了TextInput的clear方法，這樣當(dāng)我們點(diǎn)擊“清除”按鈕時(shí)，文本框中的內(nèi)容就會(huì)被清除。

isFocused(): boolean

返回值表明當(dāng)前輸入框是否獲得了焦點(diǎn)。

好了，到這里TextInput組件就介紹到這里，還有一些沒(méi)有列出的屬性請(qǐng)查看官方文檔。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com