React Native学习之 TextInput组件

TextInput的主要属性和事件

autoCapitalize：枚举类型，可选值有'none'、'sentences'、'words'、'characters'。当用于输入时，用于提示

placeholder：占位符，在输入前显示的文本内容

value：文本输入框的默认值

placeholderTextColor：占位符文本的颜色

password：如果为true，则是密码输入框，文本显示为“*”

multiline：如果为true，则是多行输入

editable：如果为false，文本框不可输入，其值默认是true

autoFocus：如果为true，将自动聚焦

clearButtonMode：枚举类型，可选值有'never'、'while-editing'、'unless-editing'、'always'。用于显示清除按钮

maxLength：能够输入的最长字符数

enablesReturnKeyAutomatically：如果值为true，表示没有文本时键盘是不能有返回键的，其默认值为false

returnKeyType：枚举类型，可选值有'default'、'go'、'google'、'join'、'next'、'route'、'search'、'send'、'yahoo'、'done'、

                          'emergency-call'。表示软键盘返回键显示的字符串

secureTextEntry：如果为true，则像密码框一样隐藏输入内容，默认值为false

onChangeText：当文本输入框的内容变化时，调用该函数。onChangeText接收一个文本的参数对象

onChange：当文本变化时，调用该函数

onEndEditing：当结束编辑时，调用该函数

onBlur：失去焦点触发事件

onFocus：获得焦点触发事件

onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件

TextInput实现简易搜索自动提示列表

import React, {Component} from "react";
import {PixelRatio, StyleSheet, Text, TextInput, View} from "react-native";

export default class TextInputDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            value: ''
        };
    }

    getValue = (text) => {
        this.setState({
            show: true,
            value: text
        });
    }

    hide = (text) => {
        this.setState({
            show: false,
            value: text
        });
    }


    render() {
        return (
            <View style={styles.flex}>
                <View style={[styles.flexDirection, styles.topStatus]}>
                    <View style={[styles.flex]}>
                        <TextInput style={styles.input}
                                   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, 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, '杨林' + this.state.value)} style={styles.item}
                              numberOfLines={1}>杨林{this.state.value}</Text>
                    </View>
                    : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    flexDirection: {
        flexDirection: 'row',
    },
    topStatus: {
        marginTop: 25,
    },
    inputHeight: {
        height: 55,
    },
    input: {
        height: 55,
        borderWidth: 1,
        marginLeft: 5,
        paddingLeft: 5,
        borderColor: '#ccc',
        borderRadius: 4
    },
    btn: {
        height: 55,
        marginLeft: 5,
        marginRight: 5,
        paddingLeft: 5,
        paddingRight: 5,
        backgroundColor: '#23BEFF',
        justifyContent: 'center',
        alignItems: 'center'
    },
    search: {
        color: '#fff',
        fontSize: 15,
        fontWeight: 'bold'
    },
    result: {
        marginTop: 1 / PixelRatio.get(),
        marginLeft: 5,
        marginRight: 5,
        height: 200,
        borderColor: '#ccc',
        borderTopWidth: 1 / PixelRatio.get()
    },
    item: {
        fontSize: 16,
        padding: 5,
        paddingTop: 10,
        paddingBottom: 10,
        borderWidth: 1 / PixelRatio.get(),
        borderColor: '#ddd',
        borderTopWidth: 0
    }
});

效果图如下：