React Native学习笔记(3)--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 输入框

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

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,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,height: 200,borderTopWidth: onePT,item: {
    fontSize: 16,padding: 5,paddingTop: 10,paddingBottom: 10,borderWidth: onePT,borderColor: '#ddd',borderTopWidth: 0,}
});

除了要熟悉TextInput组件外，还想学会如何通过state属性自定义的变量来更新组件的状态。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!