ReactNative基础—Handling TextInput

一、简介

学完了数据控制，学完了设置样式，也学完了事件的处理，今天我们来学习第一个交互性组件：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="请输入数据"          // text参数就是用户输入的数据          onChangeText={(text) => this.setState({text})}        />        <Text style={{padding: 10, fontSize: 42}}>           // 实时显示用户输入的数据          {this.state.text}        </Text>      </View>    );  }}

四、总结

通过onChangeText和placeholder两个属性就可以制作一个简单的交互组件。在开发中，android平台TextInput组件自带下划线样式，下划线的样式会根据手机系统版本来定义，不可修改。如果想去掉，可使用underlineColorAndroid属性；如果想换上自己的下划线，可在TextInput组件外层包裹一层View。
本文只描述了一下常用到的，也是最基本的属性，还有很多能够实现个性化的属性，比如：设置弹出键盘的类型、自动转换大写、自动获取光标、是否可编辑、输入内容的最大长度等等，还有一些回调方法，处理各种事件。