React Native TextInput

  自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

TextInput 是一个允许用户输入文本的基础组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>

);
}
}
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class TextInputDemo extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.top_half_view}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
邮箱登录
</Text>
</View>

<TextInput
style={styles.textinput}
placeholder='邮箱'
numberOfLines={1}
autoFocus={true}
underlineColorAndroid={'#e1e1e1'}
/>

<TextInput
style={styles.textinput}
placeholder='密码'
numberOfLines={1}
secureTextEntry={true}
underlineColorAndroid={'#e1e1e1'}
/>

<View style={{backgroundColor:'#ffffff',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<View style={styles.style_view_register}>
<Text style={{color:'#5ac4ef'}}>
注册
</Text>
</View>

<View style={styles.style_view_login}>
<Text style={{color:'white'}}>
登录
</Text>
</View>
</View>
<Text style={styles.bottom_text}>
忘了密码?点此找回
</Text>
</View>
<View style={styles.bottom_half_view}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:22,
marginLeft:20,
textAlign:'center'
},
top_half_view:{
flex: 1.3,
backgroundColor: 'white',
},
bottom_half_view:{
flex: 1,
backgroundColor: '#eeeeee',
},
textinput: {
backgroundColor:'#fff',
marginTop:5,
marginLeft:20,
marginRight:20,
textAlign:'left',
},
style_view_login:{
flex:1,
marginTop:20,
marginLeft:20,
marginRight:20,
backgroundColor:'#27b5ee',
height:35,
borderRadius:5,
justifyContent: 'center',
alignItems: 'center',
},
style_view_register:{
flex:1,
marginTop:20,
marginLeft:20,
marginRight:20,
borderColor:'#5ac4ef',
borderWidth: 1,
height:35,
borderRadius:5,
justifyContent: 'center',
alignItems: 'center',
},
bottom_text:{
color:'#27b5ee',
fontSize:14,
marginTop:10,
marginLeft:20,
textAlign:'left',
fontWeight:'bold'
},
});
AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);

文章目录
,