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',search: {
        color: '#fff',fontSize: 15,fontWeight: 'bold',result: {
        marginTop: 1,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的语法，这一方面博主也是小白，学习中，大家共同进步。

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

TextInput组件介绍

我们来做一个小实例

相关推荐