React Native TextInput

React Navtie 中的TextInput組件

Android和ios有許多不一樣的屬性，具體視狀況而定。看官方文檔https://reactnative.cn/docs/0.42/textinput/    ，不一樣版本的屬性也有些差異，我使用的是0.42版本，本身作的一點小筆記。https://reactnative.cn/docs/textinput/，這是最新的，根據你的須要選擇不一樣版本的RN，使用不一樣的屬性。

TextInput是React Native中一個容許用戶在應用中經過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、佔位文字，以及多種不一樣的鍵盤類型（如純數字鍵盤）等等。javascript

import React, { Component } from 'react';
import { AppRegistry, View, TextInput } from 'react-native';    //要引入TextInput組件

class UselessTextInput extends Component { 
 
   
constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { text:'', refreshing: false, dataSource: ds.cloneWithRows([]), }; } render() { return ( <TextInput style={styles.textArea} multiline={ 
    true} //多行輸入 若是爲true，文本框中能夠輸入多行文字。默認值爲false。 autoCorrect ={ 
    true} //若是爲false，會關閉拼寫自動修正。默認值是true。 autoFocus={ 
    true} //自動獲取焦點 blurOnSubmit={ 
    true} //若是爲true，文本框會在提交的時候失焦。對於單行輸入框默認值爲true，多行則爲false。注意：對於多行輸入框來講，若是將blurOnSubmit設爲true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。 defaultValue='初始值' //提供一個文本框中的初始值。當用戶開始輸入的時候，值就能夠改變。在一些簡單的使用情形下，若是你不想用監聽消息而後更新value屬性的方法來保持屬性和狀態同步的時候，就能夠用defaultValue來代替。 autoCapitalize="none" //控制TextInput是否要自動將特定字符切換爲大寫：可選的值爲：characters: 全部的字符。words: 每一個單詞的第一個字符.sentences: 每句話的第一個字符（默認）。none: 不自動切換任何字符爲大寫。 maxLength={ 
    1000} //限制文本框中最多的字符數。使用這個屬性而不用JS邏輯去實現，能夠避免閃爍的現象。 editable={ 
    true} //若是爲false，文本框是不可編輯的。默認值爲true。 keyboardType='numeric' //決定彈出的何種軟鍵盤的 這些值在全部平臺均可用：default 默認的鍵盤 numeric 數字 email-address 電子郵箱地址 placeholder='想要發表的內容' //文本框的默認顯示 placeholderTextColor='#ccc' //文本框的默認顯示字的顏色 value={ 
    this.state.text} underlineColorAndroid="transparent" //TextInput在安卓上默認有一個底邊框，同時會有一些padding。若是要想使其看起來和iOS上儘可能一致，則須要設置padding: 0，同時設置underlineColorAndroid="transparent"來去掉底邊框。並且，在安卓上若是設置multiline = { 
    true}，文本默認會垂直居中，可設置textAlignVertical: top樣式來使其居頂顯示。 onChangeText={(text) => this.setState({text:text})} //當文本框內容變化時調用此回調函數。改變後的文字內容會做爲參數傳遞。在此使用箭頭函數 onBlur ={()=>{ 
    console.log('失去焦點')}} //當文本框失去焦點的時候調用此回調函數。 onFocus={()=>{ 
    console.log('獲取焦點')}} //當文本框獲取焦點的時候調用此回調函數。 onEndEditing={()=>{ 
    console.log('輸入完了調用')}} //當文本輸入結束後調用此回調函數。 returnKeyType="search" onSubmitEditing ={()=>{ 
    console.log('提交了')}} //此回調函數當軟鍵盤的`肯定`/`提交`按鈕被按下的時候調用此函數。若是multiline={ 
    true}，此屬性不可用。 onLayout={()=>{ 
    console.log('組件掛載或者佈局變化了')}} //當組件掛載或者佈局變化的時候調用，參數爲{x, y, width, height}。 secureTextEntry={ 
    true} //若是爲true，文本框會遮住以前輸入的文字，這樣相似密碼之類的敏感文字能夠更加安全。默認值爲false。 selectTextOnFocus ={ 
    true} //若是爲true，當得到焦點的時候，全部的文字都會被選中。 value ='文字內容' //文本框中的文字內容。 selectionColor=‘red’ //設置輸入框高亮時的顏色（在iOS上還包括光標） /> ); } }

若是想給輸入框加邊框，在外層加View，給View寫樣式java

<View style={ { backgroundColor: "#f2f4f7", padding:20,borderBottomWidth:1,borderBottomColor:'red'}} > <TextInput placeholder='在此輸入關鍵字...' editable={true} multiline={false} style={styles.text} placeholderTextColor='#cfcfcf' underlineColorAndroid="transparent" returnKeyType="search" onFocus={()=>{console.log('獲取焦點')}} onBlur ={()=>{console.log('失去焦點')}} onChangeText={(text) =>{this.setState({text:text});}} onSubmitEditing ={()=>{console.log('調用發送方法')}} value={this.state.text} /> </View>react

第一次使用這個編輯器，可能有些瑕疵，會繼續改進，不斷學習，不斷進步！加油！

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。ios