React Native控件之TextInput组件介绍以及实际登录界面实现
来源:互联网 发布:来自远古星星的你 知乎 编辑:程序博客网 时间:2024/06/06 02:07
React Native控件之TextInput组件介绍以及实际登录界面实现
(一)前言
这一篇文章讲解一下文本输入框TextInput组件使用讲解以及模仿实现一下贵州银行登录界面效果。
TextInput组件允许用户在应用中通过键盘进行输入文本信息。并且该组件还提供了多种配置属性:自动拼写修复、自动大小写切换、占位默认字符设置以及多种不同类型的键盘切换(数字键盘与字母键盘等之间的切换)。
(二)基本使用
TextInput组件和前面讲到的Image或者 Text组件差不多,用起来都很simple。我们直接在应用中添加一个TextInput组件,然后给该组件添加相关属性(例如:边框颜色、粗细、背景、默认值)以及监听方法(例如:刚输入回调、输入完成回调、焦点变化等事件)。看一下官方例子:
<View style={styles.TextInputContainer}> <TextInput style={{borderWidth:1,borderColor:'red',height:40}} onChangeText={ (text) => this.setState({text}) } value={this.state.text} /> </View>TextInputContainer:{ marginTop:20, marginLeft:10, marginRight:10, backgroundColor:'white' },
这个例子直接定义了TextInput组件,同时设置组件的风格、高度、边框粗细以及边框颜色。而且,我们监听了TextInput的onChangeText事件来获取用户输入信息。还有其他监听事件,例如onSubmitEditing(提交编辑)、onFoucs(输入框获取焦点的时候调用)等相关的监听方法。
接下来我们进一步将例子加深:创建三个TextInput,同时每个TextInput都添加了默认值,第一个TextInput组件设置高度40,边框粗细和边框的颜色,而且可以输入多行信息。第二个TextInput设置左右额外边距以及自动获取焦点。第三个TextInput设置不可输入状态。直接上代码:
<View style={styles.TextInputContainer}> <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}} multiline={true} defaultValue='默认信息1' /> <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}} autoFocus={true} defaultValue='默认信息2' /> <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}} editable={false} defaultValue='默认信息3' /> </View>
运行效果如下图:
(三)属性方法
(四)方法(Methods)
1.isFocused()
返回值是boolean,判断当前TextInput组件当前是否获得焦点
2.clear()
移除所有输入的文本从TextInput组件。
(五)例子
1 0
- React Native控件之TextInput组件介绍以及实际登录界面实现
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- React-Native通过登录界面学习TextInput组件
- React Native 组件之TextInput
- React Native之TextInput组件实现联想输入
- React Native控件之Text组件介绍
- React Native控件之Text组件介绍
- React Native控件之Text组件介绍
- React Native入门(五)之使用输入框TextInput,按钮Button搭建登录界面
- 《React-Native系列》10、 RN组件之Text和TextInput以及注意要点
- 《React-Native系列》RN组件之Text和TextInput以及注意要点
- React Native控件只TextInput
- React Native控件只TextInput
- 一起来点React Native——常用组件之TextInput
- React Native 之 TextInput使用
- React Native 之 TextInput使用
- React Native 之 TextInput使用
- React Native之TextInput自定义
- C# 冒泡排序法
- 使用Crontab定时备份数据库
- c/c++冒泡排序(BubbleSort)
- 玩转Eclipse开发工具(一)
- ajax自动提交表单数据,经php处理返回数据
- React Native控件之TextInput组件介绍以及实际登录界面实现
- Android应用架构之Retrofit使用
- 二分类问题的评价指标:ROC,AUC
- 阿里云云服务器硬盘分区及挂载
- Unity-基于ZXing.Net实现二维码的制作
- java 解析json格式字符串
- 程序开发学习参考网站汇总
- 掌握这些angular 算是入门了
- jui验证表单