React Native組件（四）TextInput組件解析

時間 2019-11-30

標籤 react native 組件 textinput 解析欄目 React 简体版

原文原文鏈接

1 概述

TextInput組件和Text組件相似，內部都沒有使用FlexBox佈局，不一樣的是TextInput組件支持文字的輸入，由於支持文字輸入， TextInput組件要比Text組件多了一些屬性和方法。TextInput組件支持Text組件全部的Style屬性，而TextInput組件自己是沒有特有的Style屬性的。
node

2 屬性

TextInput組件支持全部的View組件的屬性，除此以外，它還有許多其餘屬性。react

2.1 onChangeText

當輸入框的內容發生變化時，就會調用onChangeText。
index.android.jsandroid

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='請輸入內容'
                               onChangeText={(text) => {
                                   this.setState({searchText: text});
                               }}/>
                    <Button style={styles.button} title='搜索'
                            onPress={ () => {
                                Alert.alert('輸入的內容爲:' + 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屬性，當咱們在TextInput中輸入內容時，這個內容就會經過onChangeText的參數text傳遞回來，在onChangeText中將text的內容保存到state中。當咱們點擊Button時，經過Alert將state中保存的內容展示出來。
運行程序效果以下圖所示。ios

在輸入框中輸入Android，點擊搜索Button，能夠看到輸入的Android展現到了Alert中。git

2.2 onChange

當輸入框的內容發生變化時，也會調用onChange，只不過它所返回的參數是一個event，咱們來改寫2.1的代碼：github

...
 <TextInput style={styles.input} placeholder='請輸入內容' keyboardType='default'
                               onChange={(event) => {
                                   this.setState({searchText: event.nativeEvent.text});
                               }}/>
...複製代碼

經過event.nativeEvent.text能夠獲得用戶輸入的內容，若是隻是想要獲得用戶輸入的內容，仍是用onChangeText比較合適。web

2.3 keyboardType

keyboardType用於設置彈出軟鍵盤的類型。它的取值爲範圍爲： enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ，其中default、numeric、email-address和phone-pad是跨平臺。react-native

...
 <TextInput style={styles.input} placeholder='請輸入內容' keyboardType='phone-pad'
                               onChangeText={(text) => {
                                   this.setState({searchText: text}); 
                               }}/>
...複製代碼

將keyboardType的值設置爲phone-pad，效果以下圖所示。
api

2.4 blurOnSubmit

若是blurOnSubmit值爲true，文本框會在按下提交鍵時失去焦點。對於單行輸入框，blurOnSubmit默認值爲true，多行則爲false。
在單行的狀況下，點擊鍵盤上的提交按鈕時，TextInput的效果以下圖所示。

將blurOnSubmit設置爲false：

...
 <TextInput style={styles.input} placeholder='請輸入內容' blurOnSubmit={false} 
                               onChangeText={(text) => {
                                   this.setState({searchText: text});
                               }}/>
...複製代碼

點擊鍵盤上的提交按鈕時，TextInput的效果以下圖所示。

2.5 onSubmitEditing

當提交鍵被按下時會調用onSubmitEditing，若是multiline等於true，則此屬性不可用。

...
 <TextInput style={styles.input} placeholder='請輸入內容' blurOnSubmit={true} multiline={false}
                               onChangeText={(text) => {
                                   this.setState({searchText: text});
                               }}
                               onSubmitEditing={(event) => {
                                   console.log(event.nativeEvent.text);
                               }}
                    />
...複製代碼

運行程序並在App的開發菜單中選擇Debug JS Remotely，這時咱們輸入Android並按下提交鍵，在Console控制檯中就會輸出結果。（筆者用的是WebStorm）

2.6 returnKeyType

用於設置軟鍵盤迴車鍵的樣式，Android平臺可使用returnKeyLabel來設置軟鍵盤迴車鍵的內容。
returnKeyType的取值爲enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')。
其中跨平臺的取值有：done、next、search、send。
Android平臺獨有：none、previous。
iOS平臺獨有：default、emergency-call、google、join、route、yahoo。
若是咱們將returnKeyType設置爲go時，效果以下圖所示。

returnKeyType設置爲send時，效果以下圖所示。

2.7 其餘跨平臺屬性

屬性名	取值	說明
autoCapitalize	enum('none', 'sentences', 'words', 'characters')	設置英文字母自動大寫規則，取值分別表示：不自動大寫、每句話首字母自動大寫、每一個單詞首字母大寫、所有字母自動大寫
autoCorrect	bool	是否會自動檢測用戶輸入的英語單詞正確性，默認值爲true
autoFocus	bool	若是爲true，在componentDidMount後會得到焦點。默認值爲false。
defaultValue	string	字符初始值，當用戶開始輸入時，該值將改變
placeholder	node	文本輸入以前將呈現的字符串，多用於提示用戶應該輸入什麼
placeholderTextColor	color	文本輸入以前將呈現的字符串的顏色
editable	bool	是否容許修改字符，默認值爲true
maxLength	number	最多容許用戶輸入多少字符
caretHidden	bool	若是爲true，則隱藏光標
multiline	bool	若是爲true，則文本輸入能夠是多行的，默認值爲false
secureTextEntry	bool	文本框是否用於輸入密碼，默認值爲false
selectTextOnFocus	bool	若是爲true，則文本框獲取焦點時，組件中的內容會被自動選中
onFocus	function	當文本框得到焦點的時候調用此回調函數
onEndEditing	function	當文本輸入結束後調用此回調函數
onLayout	function	當組件掛載或者佈局變化的時候調用，參數爲{x, y, width, height}
onScroll	function	在內容滾動時持續調用，傳回參數的格式形如{ nativeEvent: { contentOffset: { x, y } } }
onSelectionChange	function	長按選擇文本時，選擇範圍變化時調用此函數，傳回參數的格式形如 { nativeEvent: { selection: { start, end } } }
value	string	文本框中的文字內容

2.8 Android平臺獨有屬性

屬性名	取值	說明
inlineImageLeft	string	指定一個圖片放置在左側
inlineImagePadding	number	左側圖片的Padding(若是有的話)，以及文本框自己的Padding
numberOfLines	number	TextInput的行數
underlineColorAndroid	string	TextInput的下劃線顏色
returnKeyLabel	string	設置軟鍵盤迴車鍵的內容，優先級高於returnKeyType
disableFullscreenUI	bool	值爲false時(默認值)，若是TextInput的輸入空間小，系統可能會進入全屏文本輸入模式

2.9 iOS平臺獨有屬性

屬性名	取值	說明
clearButtonMode	enum('never', 'while-editing', 'unless-editing', 'always')	什麼時候在文本框右側顯示清除按鈕
clearTextOnFocus	bool	若是爲true，每次開始輸入的時候都會清除文本框的內容
keyboardAppearance	enum('default', 'light', 'dark')	鍵盤的顏色
onKeyPress	function	一個鍵被按下的時候調用此回調，傳遞給回調函數的參數爲{ nativeEvent: { key: keyValue } }
spellCheck	bool	若是爲false，則禁用拼寫檢查的樣式（好比紅色下劃線）
enablesReturnKeyAutomatically	bool	若是爲true，鍵盤會在文本框內沒有文字的時候禁用確認按鈕，默認值爲false

3 方法

clear()

clear用於清空輸入框的內容。
想要使用組件的方法則須要使用組件的引用，例子以下所示。

...
render() {
        return (
            <View style={styles.container}>
                <View style={styles.searchBar}>
                    <TextInput style={styles.input} ref="textInputRefer" placeholder='請輸入內容' blurOnSubmit={true}
                               returnKeyType='send'
                               onChangeText={(text) => {
                                   this.setState({searchText: text});
                               }}
                    />
                    <Button style={styles.button} title='清除'
                            onPress={ () => {
                                this.refs.textInputRefer.clear();
                            }
                            }/>
                </View>
            </View>
        );
    }
 ...複製代碼

在TextInput標籤中定義引用的名稱：ref="textInputRefer"，這樣咱們經過 this.refs.textInputRefer就能夠獲得TextInput 組件的引用。在Button的onPress函數中，調用了TextInput的clear方法，這樣當咱們點擊「清除」按鈕時，文本框中的內容就會被清除。