React Native学习笔记(4)--TextInput组件

110 阅读 0 评论 73 点赞

我是靠谱客的博主幸福鱼，这篇文章主要介绍React Native学习笔记(4)--TextInput组件，现在分享给大家，希望可以做个参考。

本篇是在学习《React Native入门与实战》这本书时做的笔记，代码基于ES6实现的，算是对该书中代码的小小更新。

1､TextInput介绍

在一个应用中，少不了要用户输入一些信息，如：注册、登录，大部分App都需要支持搜索功能。TextInput就是这样的组件，用户可以通过键盘将文本输入到对应的组件上，它提供了比较丰富的功能，如：自动校验、占位符及弹出的键盘类型等。TextInput组件常用的属性和事件如下：

autoCapitalize: 枚举类型，可选值有：none, sentences, words, characters。当用户输入时，用于提示。
placeholder: 占位符，在输入文本前展示。
value: 文本输入框的默认值。
placeholderTextColor: 占位符文本的颜色。
password: boolean类型，为true，表示为密码框类型。
multiline: boolean类型，为true，表示多行输入。
editable: boolean类型，为false，表示不可以输入。
clearButtonMode: 枚举类型，可选值有：never, while-editing, unless-editing, always。
maxLength: 能够输入的最长字符数
returnKeyType: 枚举类型，可选值有：default, go, google, next, search, send, done等。
onChangeText: 当文本框的内容变化时，调用该函数。onChangeText接收一个文本的参数对象。
onChange: 当文本变化时，调用此函数。
onEndEditing: 当结束编辑时，调用此函数。
onBlur: 失去焦点触发事件。
onFocus: 获得焦点触发事件。
onSubmitEditing: 当结束编辑后，点击键盘的提交按钮触发此事件。

2、自动补全功能实现

2.1 输入框

输入框
有了之前的学习，应该对自定义组件不陌生了吧？直接贴代码啦！

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, {Component} from "react";
import {TextInput, Text, View, StyleSheet} from "react-native";
export default class SearchView extends Component {
render() {
return (
<View style={[styles.flex, styles.flexDirection, styles.topStatus]}>
<View style={styles.flex}>
<TextInput style={styles.input} returnKeyType="search" />
</View>
<View style={styles.btn}J>
<Text style={styles.search}>搜索</Text>
</View>
</View>
);
}
}
//用到的style在2.2节。

如果iOS模拟器无法弹出键盘，可以通过Hardware->Keyboard选中Toggle Software Keyboard选项来设置。

2.2 自动提示列表

当用户输入关键字，我们按照“输入的关键字＋预设的关键字”的规则向用户展示结果列表。当用户点击某个条目后，隐藏结果列表，并将点击的条目显示在输入框中。

复制代码

import React, {Component} from "react";
import {TextInput, Text, View, StyleSheet, PixelRatio} from "react-native";
const onePT = 1 / PixelRatio.get();
export default class AutoCompleteSearch extends Component {
// getInitialState() { // es5的写法
//
return (
//
show: false
//
);
// }
constructor(props) { // es6的写法，通过构造函数进行属性的初始化
super(props);
this.state = { show: false, value: '' };
}
getValue(text) {
var value1 = text;
this.setState({
show: true,
value: value
});
}
hide(val) {
this.setState({
show: false,
value: val
});
}
show(title) {
alert(title);
}
render(){
return (
<View style={styles.flex, styles.topStatus}>
<View style={[styles.flexDirection, styles.inputHeight]}>
<View style={styles.flex}>
<TextInput
style={styles.input}
returnKeyType="search"
placeholder="请输入关键字"
//onChangeText={this.getValue} text == null ? false: true
onChangeText={(value)=> this.setState({show:true, value:value })}
value={ this.state.value }
/>
</View>
<View style={styles.btn}>
{/* <Text style={styles.search} onPress={this.show.bind(this, this.state.value)}>搜索</Text> */} // 当用户点击了结果列表时，会将结果显示在输入框中，这时点击搜索按钮时，会弹出对话框并显示用户输入的内容。
<Text style={styles.search} onPress={(value)=>this.setState({show: false, value: value})}>搜索</Text> //这里有一个黄色警告，Warning:Failed prop type: Invalid prop `value` of type `object` supplied to `TextInput`, expected `string`.知道是说TextInput需要string类型的属性而不是object的，但不知道怎么改。。。
</View>
</View>
{this.state.show?
<View style={[styles.result]}>
<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, 80+this.state.value + '综合商店')}
style={styles.item} numberOfLines={1}>80{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
} //根据show变量来确定是否显示结果列表。
</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'
},
result: {
marginTop: onePT,
marginLeft: 5,
marginRight: 5,
height: 200,
borderColor: '#ccc',
borderTopWidth: onePT,
},
item: {
fontSize: 16,
padding: 5,
paddingTop: 10,
paddingBottom: 10,
borderWidth: onePT,
borderColor: '#ddd',
borderTopWidth: 0,
}
});

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, {Component} from "react";
import {TextInput, Text, View, StyleSheet, PixelRatio} from "react-native";
const onePT = 1 / PixelRatio.get();
export default class AutoCompleteSearch extends Component {
// getInitialState() { // es5的写法
//
return (
//
show: false
//
);
// }
constructor(props) { // es6的写法，通过构造函数进行属性的初始化
super(props);
this.state = { show: false, value: '' };
}
getValue(text) {
var value1 = text;
this.setState({
show: true,
value: value
});
}
hide(val) {
this.setState({
show: false,
value: val
});
}
show(title) {
alert(title);
}
render(){
return (
<View style={styles.flex, styles.topStatus}>
<View style={[styles.flexDirection, styles.inputHeight]}>
<View style={styles.flex}>
<TextInput
style={styles.input}
returnKeyType="search"
placeholder="请输入关键字"
//onChangeText={this.getValue} text == null ? false: true
onChangeText={(value)=> this.setState({show:true, value:value })}
value={ this.state.value }
/>
</View>
<View style={styles.btn}>
{/* <Text style={styles.search} onPress={this.show.bind(this, this.state.value)}>搜索</Text> */} // 当用户点击了结果列表时，会将结果显示在输入框中，这时点击搜索按钮时，会弹出对话框并显示用户输入的内容。
<Text style={styles.search} onPress={(value)=>this.setState({show: false, value: value})}>搜索</Text> //这里有一个黄色警告，Warning:Failed prop type: Invalid prop `value` of type `object` supplied to `TextInput`, expected `string`.知道是说TextInput需要string类型的属性而不是object的，但不知道怎么改。。。
</View>
</View>
{this.state.show?
<View style={[styles.result]}>
<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, 80+this.state.value + '综合商店')}
style={styles.item} numberOfLines={1}>80{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
} //根据show变量来确定是否显示结果列表。
</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'
},
result: {
marginTop: onePT,
marginLeft: 5,
marginRight: 5,
height: 200,
borderColor: '#ccc',
borderTopWidth: onePT,
},
item: {
fontSize: 16,
padding: 5,
paddingTop: 10,
paddingBottom: 10,
borderWidth: onePT,
borderColor: '#ddd',
borderTopWidth: 0,
}
});