基础篇章:React Native 之 TextInput 的讲解
时间:2022-04-28
本文章向大家介绍基础篇章:React Native 之 TextInput 的讲解,主要内容包括官网例子、属性方法、TextInput实践、demo代码、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
今天我们讲解的是React Native基础系列之TextInput的讲解,如果想学习更多的开发知识或者移动开发文章,欢迎大家关注我的微信公众号:非著名程序员(smart_android)。
TextInput 是一个允许用户输入文本的基础组件。它有一个onChangeText的属性,该属性接受一个函数,每当文本输入发生变化时,此函数就会被调用。它还有一个onSubmitEditing的属性,当文本输入完被提交的时候调用。
官网例子
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '?').join(' ')}
</Text>
</View>
);
}
}
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
效果图如下:
这个例子实现的功能就是当我们在文本输入框里输入一个单词时,该单词就会换成?,如果输入的是一句话或者很多单词,就会实时动态的把一句话拆成以一个一个的单词,然后替换成?。比如:"Hello there Bob"将会被翻译为"???"。
解释
如果你们不懂js的话,可能看着有点困难,所以学React Native的时候,大家最好先去看看js,至少得懂一些。
- 逻辑与 aa && bb 这里的意思是逻辑与的操作,如果逻辑与是true,则返回前面的aa,如果是false,则返回bb。这回懂了 word && '?' 这个的意思了吧?
- [].map() 基本用法跟forEach方法类似,循环遍历数组,然后返回新的数组
- join() arrayObject.join(separator),返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
再说一遍,以后就不解释了,不懂js语法的自行去学习。
属性方法
- autoCapitalize: 控制输入框输入时字符的大写,参数有:'none', 'sentences', 'words', 'characters'。
- none:不自动切换任何字符成大写
- sentences:默认句话的首字母变成大写
- words:每个单词的首字母变成大写
- characters:每个字母全部变成大写
- placeholder:占位符,默认显示信息,在输入前显示的文本内容。相当于android中的hint,当有输入的内容时被清除。
- placeholdertTextColor: 占位符文本颜色。
- value: 文本输入框的默认值。
- password: 如果为true ,则是密码输入框,文本显示为***。
- multiline: 如果为true , 则是多行输入。
- editable: 如果为false , 文本框不可输入。其默认值事true。
- autoFocus: 如果为true, 将自动聚焦。
- clearButtonMode : 枚举类型,可选值有never,while-enditing , unless-editing,always。用于显示清除按钮。
- maxLength: 输入文本框能够输入的最长字符数。
- keyboardType:输入框的键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该功能用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。
- onChangeText: 当文本输入框的内容发生变化时,调用该函数。onChangeText接收一个文本的参数对象。
- onChange: 当文本变化时,调用该函数。
- onEndEditing: 当结束编辑时,调用该函数。
- onBlur: 失去焦点触发事件,回调该函数。
- onFocus: 获得焦点触发该监听事件。
- onSubmitEditing: 当结束编辑后,点击键盘的提交按钮出发该事件。但是当multiline={true}的时候,该属性就会失效。
- secureTextEntry:设置是否为密码安全输入框 ,默认为false。
- textAlign:设置文本横向布局方式 可选参数('start', 'center', 'end')
- textAlignVertical:设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')
- underlineColorAndroid:设置文本输入框下划线的颜色
- autoCorrect:设置拼写自动修正功能 默认为开启(true)
- onLayout:当组件布局发生变化的时候调用
- numberOfLines:number设置文本输入框行数,使用该功能需要先设置multiline为true,设置TextInput为多行文本。
TextInput实践
效果图
废话不多说,结合我们之前学的一些基础,再加上TextInput的知识,我们现在练习一个demo,巩固一下以前的知识点。效果图如下:
demo代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class TextInputDemo extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.top_half_view}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
邮箱登录
</Text>
</View>
<TextInput
style={styles.textinput}
placeholder='邮箱'
numberOfLines={1}
autoFocus={true}
underlineColorAndroid={'#e1e1e1'}
/>
<TextInput
style={styles.textinput}
placeholder='密码'
numberOfLines={1}
secureTextEntry={true}
underlineColorAndroid={'#e1e1e1'}
/>
<View style={{backgroundColor:'#ffffff',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<View style={styles.style_view_register}>
<Text style={{color:'#5ac4ef'}}>
注册
</Text>
</View>
<View style={styles.style_view_login}>
<Text style={{color:'white'}}>
登录
</Text>
</View>
</View>
<Text style={styles.bottom_text}>
忘了密码?点此找回
</Text>
</View>
<View style={styles.bottom_half_view}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:22,
marginLeft:20,
textAlign:'center'
},
top_half_view:{
flex: 1.3,
backgroundColor: 'white',
},
bottom_half_view:{
flex: 1,
backgroundColor: '#eeeeee',
},
textinput: {
backgroundColor:'#fff',
marginTop:5,
marginLeft:20,
marginRight:20,
textAlign:'left',
},
style_view_login:{
flex:1,
marginTop:20,
marginLeft:20,
marginRight:20,
backgroundColor:'#27b5ee',
height:35,
borderRadius:5,
justifyContent: 'center',
alignItems: 'center',
},
style_view_register:{
flex:1,
marginTop:20,
marginLeft:20,
marginRight:20,
borderColor:'#5ac4ef',
borderWidth: 1,
height:35,
borderRadius:5,
justifyContent: 'center',
alignItems: 'center',
},
bottom_text:{
color:'#27b5ee',
fontSize:14,
marginTop:10,
marginLeft:20,
textAlign:'left',
fontWeight:'bold'
},
});
AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);
- sudo命令使用的几个场景
- .NET Core系列 : 2 、project.json 这葫芦里卖的什么药
- 关闭与恢复visual studio实时调试器
- linux系统下的权限知识梳理
- c#如何启动/干掉/查找 进程
- Android中Application的应用
- 孟昭莉博士:大数据大道之行
- .NET Core系列 :3 、使用多个项目
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
- ubuntu系统升级记录
- .NET Core系列 :4 测试
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(4)--用OZ工具制作openstack镜像
- centos下部署NTP时间服务器同步环境记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- flink教程-聊聊 flink 1.11 中新的水印策略
- 浙大版《C语言程序设计(第3版)》题目集 习题10-4 递归求简单交错幂级数的部分和
- JSP分页显示(前端处理)
- 拓扑排序-HDU2647 Reward
- hadoop2.7.3源码解析之HA架构分析
- hadoop源码解析之hdfs内部结构分析
- 浙大版《C语言程序设计(第3版)》题目集 习题10-5 递归计算Ackermenn函数
- 浙大版《C语言程序设计(第3版)》题目集 习题10-6 递归求Fabonacci数列
- hadoop2.7.3源码解析之hdfs删除文件全流程分析h
- 二维树状数组-POJ 2155 Matrix
- 浙大版《C语言程序设计(第3版)》题目集 习题10-7 十进制转换二进制
- flink开发过程中遇到的问题集锦
- FLINK实战-使用CEP进行网站监控报警和报警恢复
- 浙大版《C语言程序设计(第3版)》题目集 习题10-8 递归实现顺序输出整数
- 浅谈DAO设计模式(示例)