1. TextInput 구성 요소 소개
기본 입력 기능을 입력 상자로 구현하는 것 외에도 TextInput 구성 요소는 자동 확인, 자리 표시자, 팝업할 다양한 키보드 유형 지정과 같은 다양한 기능도 제공합니다.
2, 구성 요소 속성
(1) autoCapitalize: 첫 글자는 자동으로 대문자로 표시됩니다. 선택 값은 없음, 문장, 단어, 문자입니다.
(2)자리 표시자: 자리 표시자, 입력 전에 표시되는 텍스트 콘텐츠입니다.
(3)value: 텍스트 입력 상자의 기본값입니다.
(4)placeholderTextColor: 자리 표시자 텍스트의 색상입니다.
(5)password: true인 경우 비밀번호 입력란을 의미합니다. 텍스트는 "*"
로 표시됩니다. (6)multiline: true이면 여러 줄 입력을 의미합니다.
(7)편집 가능: 기본값은 true입니다. false로 설정하면 편집할 수 없다는 의미입니다.
(8)autoFocus: true이면 자동으로 포커스를 얻습니다.
(9)clearButtonMode: 지우기 버튼이 표시되는 시기를 나타냅니다. 선택 값은 다음과 같습니다: never, 편집하는 동안, 편집하지 않는 한, always.
(10)maxLength: 입력할 수 있는 최대 문자 수입니다.
(11)enablesReturnKeyAutomatically: 기본값은 false입니다. 텍스트를 입력하지 않을 때 Return 키를 사용할 수 없음을 나타내려면 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
5 4
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
|
'react'에서 React, { Component } 가져오기<code class="js plain">;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}가져오기 {
AppRegistry,🎜 스타일시트,🎜 < code class="js plain">텍스트,🎜 보기, 🎜 TextInput,🎜 } from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜 클래스 검색 확장 구성 요소 {🎜 🎜 constructor(props) {🎜 super< code class="js plain">(props);🎜 this.state = {text: ''}; 🎜 }🎜 🎜 🎜 render() {🎜 반환 (🎜 <보기 스타일={styles.flex}>🎜
<스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜 <보기 스타일={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);
|
위 내용은 TextInput 구성 요소에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
