16、React Native实战之TextInput组件

文本输入框：基本组件 自动补全的搜索功能

TextInput的主要属性和事件如下：

1. autoCapitalize:枚举类型，可选值有none  sentences  words  characters当用户输入时，用于提示
2. placeholder:占位符，在输入前显示文本内容
3. value:文本输入框的默认值
4. placeholderTextColor:占位符文本的颜色
5. password:boolean类型true表示密码输入显示*
6. multiline:多行输入
7. editable:文本框是否可输入
8. autofocus:自动聚焦
9. clearButtonMode:枚举类型，never while-editing unless-editing always用于显示消除按钮
10. maxLength:能够输入的最长字符数
11. enablesReturnKeyAutomatically:如果为true表示没有文本时键盘是不能有返回键的，其默认值为false
12. retrunKeyType:枚举类型default go google join next route search send yahoo done emergency-call表示软键盘返回显示的字符串
13. secureTextEntry:隐藏输入内容，默认值为false
14. onChangeText:当文本输入框的内容变化时，调用改函数；onChangeText接收一个文本的参数对象
15. onChange:当文本变化时，调用改函数
16. onBlur:失去焦点触发事件
17. onFocus:获得焦点时触发事件
18. onSubmitEditing:当结束编辑后，点击键盘的提交按钮触发该事件

搜索框

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

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


class ZhangqfTest extends Component {
    render() {

        return (

            <View style={[styles.flex,styles.topStatus]}>

                <Search></Search>

            </View>

        );
    }
}

class Search extends Component {
    render(){
        return(
            <View style={[styles.flex,styles.flexDirection]}>
                <View style={[styles.flex,styles.input]}>

                    <TextInput  returnKeyType="search" />

                </View>


                <View style={styles.btn}>
                    <Text style={styles.search}>搜索</Text>
                </View>
            </View>

        );
    }
}


const styles = StyleSheet.create({

    flex:{
        flex:1,

    },
    flexDirection:{
        flexDirection:'row',
    },
    topStatus:{
        marginTop:25,
    },
    input:{
        height:45,
        borderColor:'red',
        borderWidth:1,
        marginLeft:10,
        paddingLeft:10,
        borderRadius:5,

    },
    btn:{
        width:45,
        marginLeft:-5,
        marginRight:5,
        backgroundColor:'#23BEFF',
        height:45,
        justifyContent:'center',
        alignItems:'center',
    },
    search:{
        color:'#fff',
        fontSize:15,
        fontWeight:'bold',
    },


});

AppRegistry.registerComponent('ZhangqfTest', () => ZhangqfTest);