React Native－8.React Native TextInput组件详解

TextInput组件介绍

输入框组件的主要属性如下：

autoCapitalize : 枚举类型，可选值有

none

,

sentences

,

words

,

characters

.当用户输入时，用于提示。

placeholder：占位符，在输入前显示的文本内容。

value ： 文本输入框的默认值。

placeholdertTextColor : 占位符文本颜色。

password ： 如果为ture ， 则是密码输入框，文本显示为＊＊＊。

multiline ： 如果为true ， 则是多行输入。

editable ： 如果为false ， 文本框不可输入。其默认值事true。

autoFocus : 如果为true， 将自动聚焦。

clearButtonMode : 枚举类型，可选值有

never

，

while－enditing

,

unless-editing

,

always

.用于显示清除按钮。

maxLength : 能够输入的最长字符数。

enablesReturnKeyAutomatically : 如果值为true，表示没有文本时键盘是不能有返回键的。其默认值为false。

returnKeyType : 枚举类型，可选值有

default

,

go

,

google

,

join

,

next

,

route

,

search

,

send

,

yahoo

,

done

,

emergency-call

。表示软键盘返回键显示的字符串。

onChangeText : 当文本输入框的内容发生变化时，调用该函数。onChangeText接收一个文本的参数对象。

onChange : 当文本变化时，调用该函数。

onEndEditing : 当结束编辑时，调用该函数。

onBlur : 失去焦点出发事件。

onFocus : 获得焦点出发事件。

onSubmitEditing : 当结束编辑后，点击键盘的提交按钮出发该事件。

我们来做一个小实例

看图：



由于我们没有具体的搜索接口，所以，我们写成模拟的，追求个界面

'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
TextInput,
} = React;

var styles = StyleSheet.create({

flex: {
flex: 1,
},
green : {
backgroundColor: 'cd2d1c'
},

flexDirection: {
flexDirection: 'row',
},
topStaus: {
marginTop:25,
},

inputHeight: {
height: 45,
},

inputs: {
height: 45,
borderWidth: 1,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#CCC',
borderRadius: 4,
},

btn: {
width: 55,
marginLeft: -5,
marginRight: 5,
backgroundColor: '#23bfff',
height: 45,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,

},

search: {
color: '#fff',
fontSize: 15,
fontWeight: 'bold',
},

result: {
marginTop: 1,
marginRight: 5,
marginLeft: 5,
height:200,
borderColor: '#ccc',
borderTopWidth: onePT,

},

item: {
fontSize: 16,
padding: 5,
paddingTop: 10,
paddingBottom: 10,
borderWidth: onePT,
borderColor: '#ddd',
borderTopWidth: 0,
}

});

var onePT = 1 / React.PixelRatio.get(); //一个像素

var Search = React.createClass({

//初始化方法
getInitialState: function(){
return{
show: false
};
},

//获取value值调用的方法
getValue: function(text) {
var value = text;
this.setState({
show: true,
value: value
});
},

//隐藏
hide: function(val){
this.setState({
show: false,
value: val
});
},

render:function(){
return(
<View style = {[styles.flex]}>
<View style={[styles.flexDirection,styles.inputHeight]}>
<View style = {styles.flex}>
<TextInput style = {styles.inputs}
returnKeyType = "search"
placeholder= "请输入搜索关键字"
onEndEditing = {this.hide.bind(this,this.state.value)}
value = {this.state.value}
onChangeText = {this.getValue}/>
</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 + '街')}
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,111 + this.state.value + '超市')}
style = {styles.item}
numberOfLines = {1}>111{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>
);
}

});

var wxsPrj = React.createClass({
render: function() {
return (
<View style = {[styles.flex,styles.topStaus]}>
<Search/>
</View>
);
}
})

AppRegistry.registerComponent('wxsPrj', () => wxsPrj);

代码详解

我们通过

this.state.show

来确定结果列表是否显示。

规则是：输入关键字＋预设关键字。 用来解决我们没有搜索接口的问题。

- onPress ＝ ｛this.hide.bind(this,this.state.value+’超市’)｝就是当用户点击时，将字符串结果拼接传入到hide函数中。

- hide 函数，代码逻辑：将this.state.show设置为false，这样结果列表就回隐藏起来了。因为状态的改变引起了视图的重新渲染，遇到this.state.show为false,就不渲染结果列表。同时设置value为我们拼接好的结果字符串，我们需要对TextInput做一些处理，才能更好的负荷预期，我们想当用户点击结果列表的某一项的时候。结果会出现在搜索框中，我们在TextInput组件上加了以下几个处理：

- returnKeyType: 因为这里的应用场景时搜索，所以我们的虚拟键盘返回键时search。

- placeholder: 不做过多解释。

- onEndEditing: 用户结束编辑时触发该事件，将会

this.state.value

值写入。这样就回在搜索框中显示该值。

- value : 通过

this.state.value

修改TextInput的value值

- onChangeText : 监听输入框的变化，

onChangeText

获取的值作为字符串传入。在初始化的时候，设置结果列表为隐藏，

注： 里边的函数定义都是JS的语法，这一方面博主也是小白，学习中，大家共同进步。