React Native - TextInput详细解说

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）样例代码

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>

<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