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