为什么我插入的视频到了投影上却播放不了?(为什么投影仪不能显示视频)
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 (
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
React
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。