React Native元件篇（三） — TextInput元件

ZY_FlyWay發表於2017-08-16
React Native元件


TextInput是什麼

      文字輸入框，相當於iOS中我們熟悉的UITextField，通過鍵盤輸入並顯示內容。
      兩者屬性有很大相同之處，下面大家一起看一下。

TextInput常見屬性

 下面是TextInput常用的屬性，大家對於 UITextField都很熟悉了，常用屬性就不一一寫程式碼發效果圖，自己可以試試。

    

  • value 字串型
    文字輸入的預設值
  • onChangeText 函式
    監聽使用者輸入的值
看下效果：





程式碼：（生命週期現在還沒有說我也是偏面的瞭解，以後會系統的學習，現在先不介紹）

constructor(props) {
        super(props);
        //設定當前狀態是text  初始值為空
        this.state = {text: ''};
    }

  render() {  
      return(  
        <View style={styles.container}> 
          <TextInput style={styles.TextInputStyles} 
              onChangeText={(Text)=>{
                this.setState({text:Text});
              }}
          /> 
          <Text style={{padding:10, fontSize:42}}>
                {this.state.text}
          </Text>
        </View>  
      );  
   }


keyboardType 鍵盤型別決定開啟哪種鍵盤，例如，數字鍵盤。

enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")


multiline 布林型
如果值為真，文字輸入可以輸入多行。預設值為假。


password 布林型
如果值為真，文字輸入框就成為一個密碼區域。預設值為假。


placeholder 字串型
在文字輸入之前字串將被呈現出來，通常被稱為佔位文字

placeholderTextColor 字串型
佔位符字串的文字顏色


autoCapitalize enum('none', 'sentences', 'words', 'characters')
可以通知文字輸入自動利用某些字元。

characters：所有字元，
words：每一個單詞的首字母
sentences：每個句子的首字母（預設情況下）
none：不會自動使用任何東西


autoCorrect 布林型
如果值為假，禁用自動校正。預設值為真。


autoFocus 布林型
如果值為真，聚焦 componentDidMount 上的文字。預設值為假。


bufferDelay 數值型
這個會幫助避免由於 JS 和原生文字輸入之間的競態條件而丟失字元。預設值應該是沒問題的，但是如果你每一個按鍵都操作的非常緩慢，那麼你可能想嘗試增加這個。


clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')
清除按鈕出現在文字檢視右側的時機


controlled 布林型
如果你真想要它表現成一個控制元件，你可以將它的值設定為真，但是按下按鍵，並且/或者緩慢打字，你可能會看到它閃爍，這取決於你如何處理 onChange 事件。


editable 布林型
如果值為假，文字是不可編輯的。預設值為真。

enablesReturnKeyAutomatically 布林型
如果值為真，當沒有文字的時候鍵盤是不能返回鍵值的，當有文字的時候會自動返回。預設值為假。

onBlur 函式
當文字輸入是模糊的，呼叫回撥函式

onChange 函式
當文字輸入的文字發生變化時，呼叫回撥函式

onFocus 函式
當輸入的文字是聚焦狀態時，呼叫回撥函式

returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
決定返回鍵的樣式

secureTextEntry 布林型
如果值為真，文字輸入框就會使輸入的文字變得模糊，以便於像密碼這樣敏感的文字保持安全。預設值為假。



授之以魚不如授之以漁

    元件篇的文章也寫了三篇了，大家也知道了學習控制元件基本上就是學習他的屬性及應用，那麼我們去哪找控制元件的屬性呢？

   比如今天的TextInput ，我羅列的只是其中一部分，那麼我怎麼去翻  TextInput的API呢？

   

import {
   AppRegistry,
  StyleSheet,
  View,
  Text,
  TextInput,
} from 'react-native';

大家從這裡可以看出來，TextInput在react-native 裡面，那我們去找一下，看看可以找到不。


然後找到了這個資料夾:




裡面那麼多資料夾，應該在哪呢，接著往下找，

最後在這個資料夾裡找到了這個檔案：





那麼屬性在哪呢？我們點開看看，最後我們看到propTypes裡有我們羅列的那些屬性還有一些我們沒有接觸過的屬性。這時候我們可以測試一下這些屬性都是幹什麼的了。


不只這一個控制元件，我們學過的和沒有學習的控制元件都可以在這裡找到，大家慢慢的試試新元件吧。




相關文章