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

最新文章

  1. tomcat匹配请求流程(原创)
  2. Ubuntu16.04安装nginx
  3. java设计模式之工厂方法探究
  4. [BZOJ1833][ZJOI2010]count 数字计数
  5. Java 学习第一步-JDK安装和Java环境变量配置
  6. Android 6.0 源代码编译实践
  7. Nhibernate基础
  8. ［原创］jQuery的this和$(this)
  9. mkisofs出错解决办法
  10. Python学习 － 使用BeautifulSoup来解析网页一：基础入门
  11. excel时会弹出向程序发送命令时出现问题的提示框
  12. BZOJ 4034 [HAOI2015]T2（树链剖分）
  13. cocos2d-x 3.0 使用Sax解析xml文件（中国显示器问题解决）
  14. 【收藏】socket 中的 recv与send函数
  15. 适合高要求应用的高性能MEMS IMU解决方案
  16. [Swift]LeetCode147. 对链表进行插入排序 | Insertion Sort List
  17. Spring注解测试
  18. (Beta)Let&#39;s-M2后分析报告
  19. 在python程序中的进程操作
  20. AJPFX:外汇的价格图表类型和技术指标类型

热门文章

  1. 课程一(Neural Networks and Deep Learning)，第二周（Basics of Neural Network programming）—— 4、Logistic Regression with a Neural Network mindset
  2. C# 字符串操作详解
  3. CentOS7 配置 Redis单实例
  4. Spring Cloud Eureka 实现服务注册与发现
  5. 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。
  6. 【工具向01】——markdown 文本编辑语言相关
  7. Spring mvc 4系列教程（三）—— Spring4.X的新特性
  8. Chapter 3 Phenomenon——23
  9. mysql笔记-索引
  10. GoogLeNetv3 论文研读笔记