React Native - TextInput详细解说
1,TextInput组件介绍
2,组件的属性
3,组件的方法
4,使用样例
- 页面上添加一个 TextInput 用于输入文字,并设置相关的占位符文字以及样式。
- 当输入框文字改变时,下方 Text 组件会实时统计并显示输入的文字长度。
- 点击输入框右侧“搜索”按钮,则将输入框内容弹出显示。



(2)样例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import React, { Component } from 'react' ; import { AppRegistry, StyleSheet, Text, View, TextInput, } from 'react-native' ; //输入框组件 class Search extends Component { //构造函数 constructor(props) { super (props); this .state = {text: '' }; } //组件渲染 render() { return ( <View style={styles.flex}> <View style={[styles.flexDirection, styles.inputHeight]}> <View style={styles.flex}> <TextInput style={styles.input} returnKeyType= "search" placeholder= "请输入关键字" onChangeText={(text) => this .setState({text})}/> </View> <View style={styles.btn}> <Text style={styles.search} onPress={ this .search.bind( this )}>搜索</Text> </View> </View> <Text style={styles.tip}>已输入{ this .state.text.length}个文字</Text> </View> ); } //搜索按钮点击 search(){ alert( "您输入的内容为:" + this .state.text); } } //默认应用的容器组件 class App extends Component { render() { return ( <View style={[styles.flex, styles.topStatus]}> <Search></Search> </View> ); } } //样式定义 const styles = StyleSheet.create({ flex:{ flex: 1, }, flexDirection:{ flexDirection: 'row' }, topStatus:{ marginTop:25, }, inputHeight:{ height:45, }, input:{ height:45, borderWidth:1, marginLeft: 5, paddingLeft:5, borderColor: '#ccc' , borderRadius: 4 }, btn:{ width:55, marginLeft:-5, marginRight:5, backgroundColor: '#23BEFF' , height:45, justifyContent: 'center' , alignItems: 'center' }, search:{ color: '#fff' , fontSize:15, fontWeight: 'bold' }, tip:{ marginLeft: 5, marginTop: 5, color: '#C0C0C0' , } }); AppRegistry.registerComponent( 'HelloWorld' , () => App); |
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1526.html
React Native - TextInput详细解说的更多相关文章
- react native TextInput
今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- React Native(十三)——ios键盘挡住textInput
渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
- [React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
随机推荐
- nodejs结合apiblue实现MockServer
apiblue功能很强大,里面支持很多插件,这些插件能够为restfulAPI提供接口文档自动生成,甚至Mockserver的功能,当然,好多插件还是有很多坑的.下面用apiblue实现下面的业务需求 ...
- nginx lua集成
版本说明: linux: 1.8.1 luajit:2.0.2(不要使用标准lua,应当使用luajit, 后者的效率比前者高很多) ngx_devel_kit: 0.2.18 lua-nginx-m ...
- [原] ubuntu安装Fcitx输入法
1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...
- Spring开发步骤
1) 源码, jar文件:此处用的是spring-framework-3.2.5.RELEASE commons-logging-1.1.3.jar 日志 spring- ...
- tomcat 启动速度慢背后的真相
1. tomcat 启动慢 在线上环境中,我们经常会遇到类似的问题,就是tomcat 启动比较慢,查看内存和cpu,io都是正常的,但是启动很慢,有的时候长达几分钟,这到底是什么原因导致的. 1.1 ...
- maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error
打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip 即可解决. 我们也可以去掉 这个 插件 <plugin> ...
- Nhibernate + MySQL 类型映射
用SQLyog工具创建表 然后用自动映射工具NHibernate Mapping Generator对表做自动映射,得到 这个是可视化界面,后面有对应的代码. using System; using ...
- vue-cli + element-ui + webpack 新建项目
1.进入项目目录 2.全局安装vue-cli 输入命令:npm install vue-cli -g 若报错:ENOENT: no such file or directory, access.... ...
- 并发编程之 AQS 源码剖析
前言 JDK 1.5 的 java.util.concurrent.locks 包中都是锁,其中有一个抽象类 AbstractQueuedSynchronizer (抽象队列同步器),也就是 AQS, ...
- T-SQL建索引
USE database GO ------------开始----------- ALTER TABLE [name] DROP CONSTRAINT 主键约束 ----删除主键约束 IF ...