| 版权声明：本文为博主原创文章，未经博主允许不得转载。
一、简介
学完了数据控制，学完了设置样式，也学完了事件的处理，今天我们来学习第一个交互性组件：TextInput。该组件的应用过程中会使用到上面所有学过的知识，因此该组件也算是一个综合应用知识的案例。
二、基础知识
基础属性：onChangeText 获取用户输入的内容，方法类型的属性（callback），用户输入的数据会以参数的形式返回给onChangeText属性基础属性：placeholder 用户输入信息前显示，多用于提示基础属性：multiline 设置多行输入基础属性：value 设置默认值
三、应用
import React, { Component } from
'react';
import { Text, TextInput, View } from
'react-native';
export
default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text:
''};
}
render() {
return (
<View style={{padding:
10}}>
<TextInput
style={{height:
40}}
placeholder=
"请输入数据"
onChangeText={(text) =>
this.setState({text})}
/>
<Text style={{padding:
10, fontSize:
42}}>
{
this.state.text}
</Text>
</View>
);
}
}
四、总结
通过onChangeText和placeholder两个属性就可以制作一个简单的交互组件。在开发中，android平台TextInput组件自带下划线样式，下划线的样式会根据手机系统版本来定义，不可修改。如果想去掉，可使用underlineColorAndroid属性；如果想换上自己的下划线，可在TextInput组件外层包裹一层View。 本文只描述了一下常用到的，也是最基本的属性，还有很多能够实现个性化的属性，比如：设置弹出键盘的类型、自动转换大写、自动获取光标、是否可编辑、输入内容的最大长度等等，还有一些回调方法，处理各种事件。
