ReactNative TextInput 组件

ReactNative TextInput 组件。

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
} from 'react-native';

/**7、TextInput 组件
* 是一个允许用户在应用中通过键盘输入文本的基本组件
* 本组件的属性提供了多种特喜感的配置，譬如 自动完成，自动大小写，站位文字
* 以及多种不同的键盘类型（如纯数字键盘）等等
* 常用：
* placeholder:占位符
* value 输入框的值
* password 是否密文输入
* editable 是否可编辑
* returnKeyType 键盘return键类型
* onChangeText 当文本变化时调用
* onEndEditing 当结束编辑室调用
* onSubmitEditing 当结束编辑，点击提交按钮时调用
* ...
*
*/
let RnDemo = React.createClass({
//设置属性默认值
getInitialState: function () {
return {
inputText: ""
};
},
//输入框的onChange的实现
getContent: function (text) {
this.setState({
inputText: text
});
}
,
clickBtn: function () {
alert(this.state.inputText);
},
render: function () {
return (
<View style={styles.container}>
<View style={styles.flex}>
<TextInput
style={styles.input}
returnKeyType="search"
placeholder="请输入内容"
onChangeText={this.getContent}
/>
</View>
<TouchableOpacity style={styles.button} onPress={this.clickBtn}>
<Text style={styles.search}>搜索</Text>
</TouchableOpacity>
</View>
);
}
});
let styles = StyleSheet.create({
container: {
flexDirection: "row",
height: 45,
marginTop: 25,
},
flex: {
flex: 1
},
input: {
height: 45,
borderWidth: 1,
marginLeft: 5,
paddingLeft: 5,
borderColor: "#CCC",
borderRadius: 4,
},
button: {
width: 55,
height: 45,
marginLeft: 5,
marginRight: 5,
backgroundColor: "#23BEFF",
justifyContent: "center",
alignItems: "center",
},
search: {
color: "#FFF",
fontSize: 15,
fontWeight: 'bold'
},
}
);