一. 簡介
TextInput是一個(gè)允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件溃列。本組件的屬性提供了多種特性的配置衅鹿，譬如自動(dòng)完成诱渤、自動(dòng)大小寫送悔、占位文字，以及多種不同的鍵盤類型（如純數(shù)字鍵盤）等等查乒。
二. 屬性
- autoCapitalize enum('none', 'sentences', 'words', 'characters')
控制TextInput是否要自動(dòng)將特定字符切換為大寫：
characters: 所有的字符敦锌。
words: 每個(gè)單詞的第一個(gè)字符。
sentences: 每句話的第一個(gè)字符（默認(rèn)）订歪。
none: 不自動(dòng)切換任何字符為大寫。 - autoCorrect bool
如果為false肆捕，會關(guān)閉拼寫自動(dòng)修正刷晋。默認(rèn)值是true。 - autoFocus bool
如果為true慎陵，在componentDidMount后會獲得焦點(diǎn)眼虱。默認(rèn)值為false。 - blurOnSubmit bool
如果為true席纽，文本框會在提交的時(shí)候失焦捏悬。對于單行輸入框默認(rèn)值為true，多行則為false润梯。注意：對于多行輸入框來說过牙，如果將blurOnSubmit設(shè)為true，則在按下回車鍵時(shí)就會失去焦點(diǎn)同時(shí)觸發(fā)onSubmitEditing事件纺铭，而不會換行寇钉。 - defaultValue string
提供一個(gè)文本框中的初始值。當(dāng)用戶開始輸入的時(shí)候舶赔，值就可以改變扫倡。
在一些簡單的使用情形下，如果你不想用監(jiān)聽消息然后更新value屬性的方法來保持屬性和狀態(tài)同步的時(shí)候竟纳，就可以用defaultValue來代替撵溃。 - editable bool
如果為false疚鲤，文本框是不可編輯的。默認(rèn)值為true缘挑。 - keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
決定彈出的何種軟鍵盤的石咬，譬如numeric（純數(shù)字鍵盤）。
這些值在所有平臺都可用：
default
numeric
email-address - maxLength number
限制文本框中最多的字符數(shù)卖哎。使用這個(gè)屬性而不用JS邏輯去實(shí)現(xiàn)鬼悠，可以避免閃爍的現(xiàn)象。 - multiline bool
如果為true亏娜，文本框中可以輸入多行文字焕窝。默認(rèn)值為false。 - onBlur function
當(dāng)文本框失去焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)维贺。 - onChange function
當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)它掂。 - onChangeText function
當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)。改變后的文字內(nèi)容會作為參數(shù)傳遞溯泣。 - onEndEditing function
當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù)虐秋。 - onFocus function
當(dāng)文本框獲得焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)。 - onLayout function
當(dāng)組件掛載或者布局變化的時(shí)候調(diào)用垃沦，參數(shù)為{x, y, width, height}客给。 - onSubmitEditing function
此回調(diào)函數(shù)當(dāng)軟鍵盤的確定/提交按鈕被按下的時(shí)候調(diào)用此函數(shù)。如果multiline={true}肢簿，此屬性不可用靶剑。 - placeholder string
如果沒有任何文字輸入，會顯示此字符串池充。 - placeholderTextColor string
占位字符串顯示的文字顏色桩引。 - secureTextEntry bool
如果為true，文本框會遮住之前輸入的文字收夸，這樣類似密碼之類的敏感文字可以更加安全坑匠。默認(rèn)值為false。 - selectTextOnFocus bool
如果為true卧惜，當(dāng)獲得焦點(diǎn)的時(shí)候厘灼，所有的文字都會被選中。 - selectionColor string
設(shè)置輸入框高亮?xí)r的顏色（在iOS上還包括光標(biāo)） - style
本組件繼承了所有Text的樣式序苏。 - value string
文本框中的文字內(nèi)容手幢。
TextInput是一個(gè)受約束的(Controlled)的組件，意味著如果提供了value屬性忱详，原生值會被強(qiáng)制與value屬性保持一致围来。在大部分情況下這都工作的很好，不過有些情況下會導(dǎo)致一些閃爍現(xiàn)象——一個(gè)常見的原因就是通過不改變value來阻止用戶進(jìn)行編輯。如果你希望阻止用戶輸入监透，可以考慮設(shè)置editable={false}桶错；如果你是希望限制輸入的長度，可以考慮設(shè)置maxLength屬性胀蛮，這兩個(gè)屬性都不會導(dǎo)致閃爍院刁。 - clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') （ios）
是否要在文本框右側(cè)顯示“清除”按鈕。 - clearTextOnFocus bool （ios）
如果為true粪狼，每次開始輸入的時(shí)候都會清除文本框的內(nèi)容退腥。 - enablesReturnKeyAutomatically bool （ios）
如果為true，鍵盤會在文本框內(nèi)沒有文字的時(shí)候禁用確認(rèn)按鈕再榄。默認(rèn)值為false狡刘。 - keyboardAppearance enum('default', 'light', 'dark') （ios）
指定鍵盤的顏色。 - onKeyPress function （ios）
當(dāng)一個(gè)鍵被按下的時(shí)候調(diào)用此回調(diào)困鸥。被按下的鍵會作為參數(shù)傳遞給回調(diào)函數(shù)嗅蔬。會在onChange之前調(diào)用。 - returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') （ios）
決定“確定”按鈕顯示的內(nèi)容疾就。 - selectionState DocumentSelectionState （ios）
可以控制一個(gè)文檔中哪段文字被選中的狀態(tài)澜术。 - numberOfLines number （android）
設(shè)置輸入框的行數(shù)。當(dāng)multiline設(shè)置為true時(shí)使用它猬腰，可以占據(jù)對應(yīng)的行數(shù)鸟废。 - underlineColorAndroid string （android）
文本框的下劃線顏色，如果要去掉文本框的邊框漆诽，請將此屬性設(shè)為透明transparent
三. 方法
- isFocused(): boolean
返回值表明當(dāng)前輸入框是否獲得了焦點(diǎn)侮攀。 - clear()
清空輸入框的內(nèi)容。
四. 示例 文本框自動(dòng)提示的搜索框
var onePT = 1 / PixelRatio.get();
class InputTextDemo extends Component {
render() {
return (
<View style={[styles.flex,styles.marginTop]}>
<Search></Search>
</View>
}
}
class Search extends Component {
constructor(props) {
super(props);
this.state = {
show: false,//是否顯示匹配條目 value: null,//選中的值 }; }
hide(val) { this.setState({ show: false, value: val, }); }
getValue(text) { this.setState({ show: true, value: text, }); }
render() { return ( <View style={styles.flex}> <View style={styles.flexDirection}> <View style={[styles.flex,styles.input]}> <TextInput returnKeyType="search"http://軟鍵盤返回鍵 placeholder="請輸入文字"http://占位符 keyboardType="web-search" onChangeText={this.getValue.bind(this)}//監(jiān)聽輸入字的改變 value={this.state.value}//匹配條目點(diǎn)擊后選中的值 underlineColorAndroid="transparent" /> </View> <View style={styles.btn}> <Text style={styles.search} onPress={this.hide.bind(this,this.state.value)}>搜索</Text> </View> </View> {this.state.show? <View style={styles.result}> <Text onPress={this.hide.bind(this, this.state.value+"的習(xí)慣")} style={styles.item} numberOfLines={1}>{this.state.value}的習(xí)慣 </Text> <Text onPress={this.hide.bind(this, this.state.value+"的視頻")} style={styles.item} numberOfLines={1}>{this.state.value}的視頻</Text> <Text onPress={this.hide.bind(this, "呵呵"+this.state.value+"的文字")} style={styles.item} numberOfLines={1}>呵呵{this.state.value}的文字</Text> <Text onPress={this.hide.bind(this, this.state.value+"的圖片")} style={styles.item} numberOfLines={1}>{this.state.value}的圖片</Text> </View> :null } </View> ); } }
const styles = StyleSheet.create({ flex: { flex: 1 }, marginTop: { marginTop: 25, }, flexDirection: {//方向 因?yàn)镽N默認(rèn)是豎直方向 flexDirection: 'row', }, input: { borderWidth: 1, borderColor: 'red', height: 40, borderRadius: 5, paddingLeft: 10, marginLeft: 10, }, btn: { backgroundColor: '#23BEFF', height: 40, marginLeft: -5, marginRight: 5, width: 45, justifyContent: 'center', alignItems: 'center', }, search: { fontSize: 20, color: '#fff', fontWeight: 'bold', }, result: { marginTop: onePT, marginLeft: 18, marginRight: 10, height: 200, }, item: { fontSize: 16, paddingTop: 5, paddingBottom: 5, }, });
效果
輸入文本
點(diǎn)擊第一個(gè)條目
記錄我自己的RN學(xué)習(xí)之路厢拭，純屬自己增值，有什么不對的地方撇叁，一起討論進(jìn)步
