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 組件會實時統計並顯示輸入的文字長度。
- 點擊輸入框右側“搜索”按鈕，則將輸入框內容彈出顯示。
|
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