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的语法，这一方面博主也是小白，学习中，大家共同进步。