React Native TextInput

Posted on Edited on In

自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。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);