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);
以上就是textinput组件的详细介绍的详细内容。