移动跨平台框架ReactNative输入组件TextInput【09】

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 输入组件 TextInput

输入组件

TextInput

就是让用户输入数据的，比如输入登录有户名，输入登录密码。

除了简单的单行输入框外，还可以用于输入大量的文本，比如输入用户反馈，输入用户说明等等。

可以说，React Native 中的输入组件

TextInput

是 HTML 中的

和

的结合体。

React Native - 输入组件 TextInput

TextInput

组件是 React Native 的内置组件，不需要做额外的安装

引入组件

要使用输入组件 TextInput，必须先引入

import { TextInput } from 'react-native'

使用语法

输入组件 TextInput 是一个可视组件，使用语法如下

<TextInput 
   style ={styles}
   underlineColorAndroid ="{transparent|"
   placeholder ="Email"
   placeholderTextColor ="{#9a73ef}"
   numberOfLines={1}
   editable={true|false}

   keyboardType={"default"|"number-pad"|"decimal-pad"|"numeric"|"email-address"|"phone-pad"}

   secureTextEntry={true|false}
   multiline={true|false}
   returnKeyType ={"done"|"go"|"next"|"search"|"send"}
   autoCapitalize ="none"
   onChangeText ={function(text){}}/>

看起来属性有点多，我们挑几个通用的常用的做个介绍
属性类型说明stylestyle用于定制组件的样式underlineColorAndroidcolorAndroid 中下划线的颜色，透明则为

transparent

placeholderstring占位符placeholderTextColorcolor占位符的颜色multilinebool是否多行，默认为单行numberOfLinesnumber设置了

multiline

后要设置的行数editablebool是否可编辑keyboardTypestring键盘类型，可选的值有 “default”,“number-pad”,“decimal-pad”, “numeric”,“email-address”,“phone-pad”secureTextEntrybool是否属于密码框类型returnKeyTypestring键盘上的返回键类型，可选的值有 “done”,“go”,“next”,“search”,“send”autoCapitalizestring字母大写模式，可选的值有:‘none’, ‘sentences’, ‘words’, ‘characters’onChangeTextfunction文本变更后的回调函数，参数为输入框里的文本

注意

使用

multiline={true}

和

numberOfLines={5}

可以设置输入框为多行模式，但它并不会在外观上显示为多行，需要设置样式属性

height

才会显示为多行。

范例

下面我们使用输入组件 TextInput 实现几个常见的输入框，比如用户名输入框、密码输入框、文本描述输入框。

App.js

import React,{ Component }from'react'import{ View, Text, TouchableOpacity, TextInput, StyleSheet }from'react-native'classInputsextendsComponent{
   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}
               underlineColorAndroid ="transparent"
               placeholder ="请输入邮箱"
               placeholderTextColor ="#ccc"
               autoCapitalize ="none"
               keyboardType ="email-address"
               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)}><Text style ={styles.submitButtonText}>注册</Text></TouchableOpacity></View>)}}exportdefault 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'}})