移动跨平台框架ReactNative输入组件TextInput【09】

举报
江咏之 发表于 2022/04/12 23:06:31 2022/04/12
【摘要】 前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI ...

在这里插入图片描述
前端江太公


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 中的输入组件 TextInputHTML 中的 的结合体。

React Native - 输入组件 TextInput

TextInput 组件是 React Native 的内置组件,不需要做额外的安装

引入组件

要使用输入组件 TextInput,必须先引入

import { TextInput } from 'react-native'

  
 
  • 1

使用语法

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93

文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。

原文链接:jiangwenxin.blog.csdn.net/article/details/124115554

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。