React Native之TextInput组件实现联想输入

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 : 当结束编辑后,点击键盘的提交按钮出发该事件。

实例

在实际开发中,我们经常会碰到联想输入的情况,有的是结合后台返回的,有的是本地联想的。那么今天我们看一个联想输入的例子:

我们通过给TextInput绑定onChangeText监听事件,从而实现联想功能。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow TextInput自动提示输入
 */

 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   Image,
   TextInput,
   View
 } from 'react-native';

 var Dimensions = require('Dimensions');
 var ScreenWidth = Dimensions.get('window').width;

class TextInputView extends Component {

  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

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

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

   render() {
     return (
       <View style={styles.container}>
       <TextInput style = {styles.styleInput}
          returnKeyType = "search"
          placeholder= "请输入搜索关键字"
          onEndEditing = {this.hide.bind(this,this.state.value)}
          value = {this.state.value}
          onChangeText = {this.getValue.bind(this)}/>

          <Text style={styles.styleText}>搜索结果:</Text>

         {this.state.show?
          <View style = {[styles.styleResult]}>
          <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>
           </View>:null}
       </View>
     );
    }
  }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor:'#ffffff',
     marginTop:20
   },
   styleInput: {
     height: 40,
     borderWidth: 1,
     marginLeft: 10,
     marginRight:10,
     paddingLeft: 5,
     borderColor: '#cccccc',
     borderRadius: 4,
   },
   styleResult: {
    marginTop: 10,
    marginLeft: 15,
    },
   styleText: {
     fontSize: 18,
     marginTop:10,
     marginLeft:15
   },
   styleItem: {
    fontSize: 20,
    padding: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth: 1,
    marginLeft:15,
    borderColor: '#dddddd',
    borderTopWidth: 0,
    }
 });

export default TextInputView;     

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏税国龙的专栏

我们来用 D3.js 画个饼图

最近在做腾讯云大数据可视化项目,天天跟各种柱状图、饼图、面积图等打交道。 饼图能直观的表现一堆数据中各项所占比例,是非常常见的图表之一。本文尝试来讲讲如何在浏览...

1.6K70
来自专栏everhad

ImageView缩放选项

ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项。 Options for scaling the bounds of a...

25670
来自专栏java架构师

C#对图片文件的压缩、裁剪操作初探

在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便。毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件...

33560
来自专栏十月梦想

CSS3 动画Animation的8大属性

animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”,”隔开,适用于所有元素,包含伪对象:after和:before

10910
来自专栏Flutter入门到实战

自定义ProgressBar(一)

----------------------------------------------- Widget.Holo.开头的 ---------------...

24120
来自专栏章鱼的慢慢技术路

用Python中的tkinter模块作图

51950
来自专栏菩提树下的杨过

silverlight:如何在图片上挖个洞?

一、不写代码的方法:用Blend 看图说话: 这是待处理的图片win7 ? 在win7上,画一个矩形,再用钢笔随便画个封闭的path ? 将矩形与path合...

201100
来自专栏deepcc

css3 box-sizing属性

35960
来自专栏深度学习之tensorflow实战篇

绘制动态心形图案::R语言绘制心形图

原始方程源于此贴一楼:直通车 整理修改后: 被窝修改成这样: x<-seq(-1.1,1.1,length = 3000) rep<-30 y<-matri...

49870
来自专栏前端布道

为什么是link-visited-hover-active

前言 通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的...

36450

扫码关注云+社区

领取腾讯云代金券