移动跨平台框架ReactNative输入组件TextInput【09】，前端开发大全

输入组件 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){}}/>

看起来属性有点多，我们挑几个通用的常用的做个介绍

| 属性 | 类型 | 说明 |

| — | — | — |

| style | style | 用于定制组件的样式 |

| underlineColorAndroid | color | Android 中下划线的颜色，透明则为 transparent |

| placeholder | string | 占位符 |

| placeholderTextColor | color | 占位符的颜色 |

| multiline | bool | 是否多行，默认为单行 |

| numberOfLines | number | 设置了 multiline 后要设置的行数 |

| editable | bool | 是否可编辑 |

| keyboardType | string | 键盘类型，可选的值有 “default”,“number-pad”,“decimal-pad”, “numeric”,“email-address”,“phone-pad” |

| secureTextEntry | bool | 是否属于密码框类型 |

| returnKeyType | string | 键盘上的返回键类型，可选的值有 “done”,“go”,“next”,“search”,“send” |

| autoCapitalize | string | 字母大写模式，可选的值有:‘none’, ‘sentences’, ‘words’, ‘characters’ |

| onChangeText | function | 文本变更后的回调函数，参数为输入框里的文本 |

注意

使用 multiline={true} 和 numberOfLines={5} 可以设置输入框为多行模式，但它并不会在外观上显示为多行，需要设置样式属性 height 才会显示为多行。

范例

---

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

App.js

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 (

<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 = {
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取

于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取