移动跨平台框架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){}}/>

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

属性	类型	说明
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'
   }
})