文本输入框:基本组件 自动补全的搜索功能
TextInput的主要属性和事件如下:
- autoCapitalize:枚举类型,可选值有none sentences words characters当用户输入时,用于提示
- placeholder:占位符,在输入前显示文本内容
- value:文本输入框的默认值
- placeholderTextColor:占位符文本的颜色
- password:boolean类型true表示密码输入显示*
- multiline:多行输入
- editable:文本框是否可输入
- autofocus:自动聚焦
- clearButtonMode:枚举类型,never while-editing unless-editing always用于显示消除按钮
- maxLength:能够输入的最长字符数
- enablesReturnKeyAutomatically:如果为true表示没有文本时键盘是不能有返回键的,其默认值为false
- retrunKeyType:枚举类型default go google join next route search send yahoo done emergency-call表示软键盘返回显示的字符串
- secureTextEntry:隐藏输入内容,默认值为false
- onChangeText:当文本输入框的内容变化时,调用改函数;onChangeText接收一个文本的参数对象
- onChange:当文本变化时,调用改函数
- onBlur:失去焦点触发事件
- onFocus:获得焦点时触发事件
- 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:{ 45, marginLeft:-5, marginRight:5, backgroundColor:'#23BEFF', height:45, justifyContent:'center', alignItems:'center', }, search:{ color:'#fff', fontSize:15, fontWeight:'bold', }, }); AppRegistry.registerComponent('ZhangqfTest', () => ZhangqfTest);