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

网友投稿 587 2022-05-28

前端江太公

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'

1

使用语法

输入组件 TextInput 是一个可视组件,使用语法如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

注意

使用 multiline={true} 和 numberOfLines={5} 可以设置输入框为多行模式,但它并不会在外观上显示为多行,需要设置样式属性 height 才会显示为多行。

范例

下面我们使用输入组件 TextInput 实现几个常见的输入框,比如用户名输入框、密码输入框、文本描述输入框。

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 ( this.register(this.state.email, this.state.password) }> 注册 ) } } 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

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

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

React

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:激活码方式注册的实现原理述
下一篇:[转]终端至上!将Vim打造成全新的集成开发环境!
相关文章