React-Native學(xué)習(xí)系列(三)-TextInput組件

今天我們講的是使用頻率比較高的TextInput組件。
對于TextInput組件大家肯定不陌生,QQ,微信,各個App都有登陸注冊模塊,需要大家輸入信息,這就用到了TextInput!

TextInput組件

TextInput是一個允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件,它有許多特性可以自己定制,今天我們就來講解一下!

First

我們先來創(chuàng)建一個inputText.js文件

import React, {
  Component
} from 'react';
import {
View,
StyleSheet,
Image,
TextInput,
Dimensions,
Text
} from 'react-native';
let ScreenHeight =  Dimensions.get('window').height - 64;
import NavBar from '../navbar';
export default class TextInputView extends Component {
 render() {
    return (
    <View>
     <NavBar name='TextInput' back={()=>{this.props.navigator.pop()}}/>
     <View style={styles.container}>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.first]}>
            </TextInput>
        </View>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.second]}>
            </TextInput>
        </View>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.third]}>
            </TextInput>
        </View>

        <TextInput style={[styles.baseStyle,styles.fourth]}>{/**/}
        </TextInput>
    </View>
  </View>
 )
}
}

const styles = StyleSheet.create({
container: {
 height: ScreenHeight,
 backgroundColor: 'gainsboro',
 alignItems: 'center',
 justifyContent: 'center',
 },
 baseStyle: {
  height: 40,
  backgroundColor: 'white',
  width: 200
},
 first: {

 },
 second: {
    
 },
 third: {

 },
 fourth: {

 },
});

這樣,我們就創(chuàng)建了一個這樣的頁面


從上到下,依次是輸入框1-4,那么我們現(xiàn)在就可以來學(xué)習(xí)如何使用了

Second

可能有人會問了,為什么最后一個位置不對呢?
都設(shè)置居中了啊,所以大家要注意,一般來說,設(shè)定TextInput的位置的時候,都是配合View來使用的!

咱們先看一下大寫切換屬性autoCapitalize,

characters: 所有的字符都切換為大寫,就是說,你輸入框里的字符全都是大寫。  
words: 每個單詞的第一個字符。比如說I Am Demon404!  
sentences: 每句話的第一個字符切換為大寫,這個是默認(rèn)的。  
none: 不自動切換任何字符為大寫。    

autoCorrect={false}||autoCorrect={true},這個屬性是拼寫自動糾正提示的屬性。
autoFocus,也是一個bool值類型的屬性,它的作用是在組件生命周期的componentDidMount后獲得焦點。
defaultValue:(string)設(shè)置輸入框的初始值,當(dāng)開始輸入的時候值可以改變。
editable:(bool)設(shè)置是否可以編輯。
keyboardType:設(shè)置鍵盤類型,("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')這些是它的類型
maxLength:(int)限制文字輸入的長度。
multiline:(bool)設(shè)置是否可以輸入多行文字,
onBlur:(fun)當(dāng)文本框失去焦點的時候觸發(fā)該方法
onChange:(fun)當(dāng)文本框文字改變的時候觸發(fā)該方法
onChangeText:(fun)文本框文字改變的時候調(diào)用,會把輸入的文字傳遞
onEndEditing (fun) 當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù)。
onFocus (fun)當(dāng)文本框獲得焦點的時候調(diào)用此回調(diào)函數(shù)。
onLayout (fun)當(dāng)組件掛載或者布局變化的時候調(diào)用,參數(shù)為{x, y, width, height}。
placeholder:(str)如果沒有文字輸入的話會顯示此占位字符串
placeholderTextColor:(str)更改placeholer占位字符串的文字顏色
secureTextEntry (bool)設(shè)置是否加密,常用于密碼輸入
selectionColor:(str)設(shè)置輸入框高亮?xí)r的顏色
安卓輸入框默認(rèn)的有下劃線,可以設(shè)置這個屬性來隱藏
underlineColorAndroid='transparent'

Final

基本上常用的屬性都介紹完了,那么它的樣式呢?
TextInput集成了Text的所有樣式,如果有不明白的,可以看一下我的第一篇文章

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容