移動跨平臺框架ReactNative輸入組件TextInput【09】

前端江太公

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

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小時內刪除侵權內容。