16、React Native实战之TextInput组件

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

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:{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);

转载于:https://www.cnblogs.com/zhangqf/p/6505692.html

16、React Native实战之TextInput组件相关推荐

手把手教React Native实战开发视频教程干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
React Native中的TextInput (补充)
React Native中的TextInput (补充) TextInput 的属性: import React, { Component } from 'react'; import { AppRe ...
3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...
React Native 实战：构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
React Native 项目简单整理-组件优化
2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...
先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...
导语内容提要本书作者Nader Dabit是AWS Mobile开发人员.React Native Training创始人和React Native Radio播客主持人.本书旨在帮助iOS.An ...
React Native中一些常用组件用法
View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleShee ...
【稀饭】react native 实战系列教程之首页列表UI实现
首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来. 设计 (图丑,莫见怪~) ...

16、React Native实战之TextInput组件

16、React Native实战之TextInput组件相关推荐

最新文章

热门文章