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

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