移动跨平台框架ReactNative输入组件TextInput【09】_前端江太公_react native 多行输入框

大大的周 02-07 5826

前端江太公

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 是一个可视组件，使用语法如下

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

属性类型说明stylestyle用于定制组件的样式underlineColorAndroidcolorAndroid 中下划线的颜色，透明则为 transparentplaceholderstring占位符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' 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' } })