1，TextInput組件介紹 TextInput 組件除了作為輸入框實現基本的輸入功能外，它還提供了許多其他功能，比如自動校驗、占位符以及指定彈出不同的鍵盤類型等。 2，組件的屬性 （1）autoCapitalize：首字母自動大寫。可選值有：none、sentences、words、charac ...
1，TextInput組件介紹
TextInput 組件除了作為輸入框實現基本的輸入功能外，它還提供了許多其他功能，比如自動校驗、占位符以及指定彈出不同的鍵盤類型等。2，組件的屬性
（1）autoCapitalize：首字母自動大寫。可選值有：none、sentences、words、characters。 （2）placeholder：占位符，在輸入前顯示的文本內容。 （3）value：文本輸入框的預設值。 （4）placeholderTextColor：占位符文本的顏色。 （5）password：如果為 true，表示密碼輸入框。文本顯示為“*” （6）multiline：如果為 true，表示多行輸入。 （7）editable：預設為 true。如果設置為 false 表示不可編輯。 （8）autoFocus：如果為 true，則自動獲取焦點。 （9）clearButtonMode：表示什麼時候會顯示清除按鈕。可選值有：never、while-editing、unless-editing、always。 （10）maxLength：能夠輸入的最長字元數。 （11）enablesReturnKeyAutomatically：預設為 false。設置為 true 表示沒有輸入文本時返回鍵無法使用。 （12）returnKeyType：表示軟鍵盤返回鍵顯示的字元串。可選值為：default、go、google、join、next、route、search、send、yahoo、done、emergency-call。 （13）secureTextEntry：預設為 false。如果為 true，則像密碼框一樣隱藏輸入內容。
3，組件的方法
（1）onChange：當文本發生變化時，調用該函數。
（2）onEndEditing：當結束編輯時，調用該函數。
（3）onBlur：失去焦點時觸發。
（4）onFocus：獲得焦點時觸發。
（5）onSubmitEditing：當結束編輯後，點擊鍵盤的提交按鈕觸發該事件。
4，使用樣例
（1）效果圖
- 頁面上添加一個 TextInput 用於輸入文字，並設置相關的占位符文字以及樣式。
- 當輸入框文字改變時，下方 Text 組件會實時統計並顯示輸入的文字長度。
- 點擊輸入框右側“搜索”按鈕，則將輸入框內容彈出顯示。
（2）樣例代碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
//輸入框組件
class Search extends Component {
//構造函數
constructor(props) {
super(props);
this.state = {text: ''};
}
//組件渲染
render() {
return (
<View style={styles.flex}>
<View style={[styles.flexDirection, styles.inputHeight]}>
<View style={styles.flex}>
<TextInput
style={styles.input}
returnKeyType="search"
placeholder="請輸入關鍵字"
onChangeText={(text) => this.setState({text})}/>
</View>
<View style={styles.btn}>
<Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
</View>
</View>
<Text style={styles.tip}>已輸入{this.state.text.length}個文字</Text>
</View>
);
}
//搜索按鈕點擊
search(){
alert("您輸入的內容為："+this.state.text);
}
}
//預設應用的容器組件
class App extends Component {
render() {
return (
<View style={[styles.flex, styles.topStatus]}>
<Search></Search>
</View>
);
}
}
//樣式定義
const styles = StyleSheet.create({
flex:{
flex: 1,
},
flexDirection:{
flexDirection:'row'
},
topStatus:{
marginTop:25,
},
inputHeight:{
height:45,
},
input:{
height:45,
borderWidth:1,
marginLeft: 5,
paddingLeft:5,
borderColor: '#ccc',
borderRadius: 4
},
btn:{
width:55,
marginLeft:-5,
marginRight:5,
backgroundColor:'#23BEFF',
height:45,
justifyContent:'center',
alignItems: 'center'
},
search:{
color:'#fff',
fontSize:15,
fontWeight:'bold'
},
tip:{
marginLeft: 5,
marginTop: 5,
color: '#C0C0C0',
}
});
AppRegistry.registerComponent('HelloWorld', () => App);
|
原文出自：www.hangge.com 轉載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1526.html
