React Native 输入组件 TextInput - React Native 基础教程

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

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

可以说，React Native 中的输入组件 TextInput 是 HTML 中的 <input> 和 <textarea> 的结合体。

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 (
         <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>
      )
   }
}
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'
   }
})

演示效果如下

打开看到输入密码的时候是黑屏对吧，那是录制视频的保护错误，输入密码的时候为了防止大家看到，自然就黑了。