React Native学习笔记(3)--TextInput组件

前端之家收集整理的这篇文章主要介绍了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属性自定义的变量来更新组件的状态。

猜你在找的React相关文章