1,TextInput组件介绍

TextInput 组件除了作为输入框实现基本的输入功能外,它还提供了许多其他功能,比如自动校验、占位符以及指定弹出不同的键盘类型等。

2,组件的属性

(1)autoCapitalize:首字母自动大写。可选值有:none、sentences、words、characters。
(2)placeholder:占位符,在输入前显示的文本内容。
(3)value:文本输入框的默认值。
(4)placeholderTextColor:占位符文本的颜色。
(5)password:如果为 true,表示密码输入框。文本显示为“*”
(6)multiline:如果为 true,表示多行输入。
(7)editable:默认为 true。如果设置为 false 表示不可编辑。
(8)autoFocus:如果为 true,则自动获取焦点。
(9)clearButtonMode:表示什么时候会显示清除按钮。可选值有:never、while-editing、unless-editing、always。
(10)maxLength:能够输入的最长字符数。
(11)enablesReturnKeyAutomatically:默认为 false。设置为 true 表示没有输入文本时返回键无法使用。
(12)returnKeyType:表示软键盘返回键显示的字符串。可选值为:default、go、google、join、next、route、search、send、yahoo、done、emergency-call。
(13)secureTextEntry:默认为 false。如果为 true,则像密码框一样隐藏输入内容。

3,组件的方法

(1)onChange:当文本发生变化时,调用该函数。
(2)onEndEditing:当结束编辑时,调用该函数。
(3)onBlur:失去焦点时触发。
(4)onFocus:获得焦点时触发。
(5)onSubmitEditing:当结束编辑后,点击键盘的提交按钮触发该事件。

4,使用样例

(1)效果图
  • 页面上添加一个 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详细解说的更多相关文章

  1. react native TextInput

    今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...

  2. React Native 之 TextInput使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  4. React Native控件只TextInput

    TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...

  5. react native 封装TextInput组件

    上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址  react native定报预披项目知识点总结 TextInput介绍 官 ...

  6. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  7. React Native(十三)——ios键盘挡住textInput

    渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...

  8. [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法

    React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...

  9. [React Native]高度自增长的TextInput组件

    之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...

随机推荐

  1. nodejs结合apiblue实现MockServer

    apiblue功能很强大,里面支持很多插件,这些插件能够为restfulAPI提供接口文档自动生成,甚至Mockserver的功能,当然,好多插件还是有很多坑的.下面用apiblue实现下面的业务需求 ...

  2. nginx lua集成

    版本说明: linux: 1.8.1 luajit:2.0.2(不要使用标准lua,应当使用luajit, 后者的效率比前者高很多) ngx_devel_kit: 0.2.18 lua-nginx-m ...

  3. [原] ubuntu安装Fcitx输入法

    1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...

  4. Spring开发步骤

    1) 源码, jar文件:此处用的是spring-framework-3.2.5.RELEASE commons-logging-1.1.3.jar                日志 spring- ...

  5. tomcat 启动速度慢背后的真相

    1. tomcat 启动慢 在线上环境中,我们经常会遇到类似的问题,就是tomcat 启动比较慢,查看内存和cpu,io都是正常的,但是启动很慢,有的时候长达几分钟,这到底是什么原因导致的. 1.1 ...

  6. maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error

    打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip   即可解决. 我们也可以去掉 这个 插件   <plugin>    ...

  7. Nhibernate + MySQL 类型映射

    用SQLyog工具创建表 然后用自动映射工具NHibernate Mapping Generator对表做自动映射,得到 这个是可视化界面,后面有对应的代码. using System; using ...

  8. vue-cli + element-ui + webpack 新建项目

    1.进入项目目录 2.全局安装vue-cli 输入命令:npm install vue-cli -g 若报错:ENOENT: no such file or directory, access.... ...

  9. 并发编程之 AQS 源码剖析

    前言 JDK 1.5 的 java.util.concurrent.locks 包中都是锁,其中有一个抽象类 AbstractQueuedSynchronizer (抽象队列同步器),也就是 AQS, ...

  10. T-SQL建索引

    USE database GO   ------------开始----------- ALTER TABLE [name] DROP CONSTRAINT 主键约束    ----删除主键约束 IF ...