ReactNative输入组件TextInput的使用方法

输入组件TextInput就是让用户输入数据的，比如输入登录有用户名，输入登录密码，除了简单的单行输入框外，还可以用于输入大量的文本，比如输入用户反馈，输入用户说明等
React Native–输入组件TextInput
TextInput组件是React Native的内置组件，不需要做额外的安装
引入组件
需使用输入组件Textinput,必须先引入
import {TextInput} from ‘react-native’
案例

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

class Inputs extends Component{
  state={
    email:'',
    password:'',
    intro:'',
  }
  handleEmail=(text)=>{
    this.setState({email:text})
  }
  handlePassword=(text)=>{
    this.setState({password:text})
  }
  handleIntro=(text)=>{
    this.setState({intro:text})
  }
  register=(email,pass,intro)=>{
    alert('email:'+email+'\npassword:'+pass+"\nintro:"+intro)
  }
  render(){
    return(
      <View style={styles.container}>
        <TextInput 
        style={styles.input}
        //下划线的颜色，透明则为transparent
        underlineColorAndroid="transparent"
        // 占位符
        placeholde="请输入邮箱"
        // 占位符的字体颜色
        placeholderTextColor="#ccc"
        // 字母大写模式：'none','sentences','words','characters'
        autoCapitalize="none"
        // 键盘类型，可选的值有“default,"number-pad","decimal-pad","numeric","email-address","phone-pad"
        keyboardType="email-address"
        //键盘上的返回键类型，可选的值有"done",go,next,search,send
        returnKeyType="next"
        //文本变更后的会掉函数，参数为输入框里的文本
        onChangeText={this.handleEmail}
        />
        <TextInput
        style={styles.input}
        underlineColorAndroid="transparent"
        placeholder="请输入密码"
        placeholderTextColor="#ccc"
        autoCapitalize="none"
        returnKeyType="next"
        //是否属于密码框类型
        secureTextEntry={true}
        onChangeText={this.handlePassword}
        />

        <TextInput 
        style={[styles.input,{height:100}]}
        underlineColorAndroid="transparent"
        placeholder="请输入描述"
        placeholderTextColor="#ccc"
        autoCapitalize="none"
        //多行设置
        multiline={true}
        //行数
        numberOfLines={4}
        //文字的位置考上
        textAlignVertical="top"
        returnKeyType="done"
        onChangeText={this.handleIntro}
        />
        {/* 封装视图，使其可以正确响应触摸操作 */}
        <TouchableOpacity
        style={styles.submitButton}
        onPress={
          ()=>this.register(this.state.email,this.state.password,this.state.intro)
        }>
        <Text style={styles.submitButtonText}>注册</Text>
      </TouchableOpacity>
      </View>
    )
  }
}

export default Inputs

const styles=StyleSheet.create({
  container:{
    paddingTop:23
  },
  input:{
    margin:15,
    paddingLeft:8,
    height:40,
    borderColor:'#eeeeee',
    borderWidth:1
  },
  submitButton:{
    backgroundColor:'#7a42f4',
    padding:10,
    alignItems:'center',
    margin:15,
    height:40,
  },
  submitButtonText:{
    color:'white'
  }
})