RN控件之TextInput

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  */
 5 'use strict';
 6 import React, {
 7   AppRegistry,
 8   Component,
 9   StyleSheet,
10   Text,
11   View,
12   Image,
13   TextInput,
14 } from 'react-native';
15 
16 class MyProject2 extends Component {
17   render() {
18       return (
19           <View style={{backgroundColor:'#f4f4f4',flex:1}}>
20               <Image style={styles.style_image} source={require('./images/qq.jpg')}/>
21               <TextInput
22                   style={styles.style_user_input}
23                   placeholder="QQ号/手机号/邮箱"
24                   numberOfLines={1}
25                   autoFocus={true}
26                   underlineColorAndroid={'transparent'}
27                   textAlign="center"
28               />
29               <View style={{height:1,backgroundColor:'#f4f4f4'}}/>
30               <TextInput
31                   style={styles.style_pwd_input}
32                   placeholder="密码"
33                   numberOfLines={1}
34                   underlineColorAndroid={'transparent'}
35                   secureTextEntry={true}
36                   textAlign="center"
37               />
38               <View style={styles.style_view_commit}>
39                   <Text style={{color:'#fff'}}>登录</Text>
40               </View>
41 
42               <View style={{flex:1,flexDirection:'row',alignItems:'flex-end',bottom:10}}>
43                   <Text style={styles.style_view_unlogin}>无法登录?</Text>
44                   <Text style={styles.style_view_register}>新用户</Text>
45               </View>
46           </View>
47       );
48   }
49 }
50 
51 const styles = StyleSheet.create({
52     style_image:{
53         borderRadius:35,
54         height:70,
55         width:70,
56         marginTop:40,
57         alignSelf:'center'
58     },
59     style_user_input:{
60         backgroundColor:'#fff',
61         marginTop:10,
62         height:35,
63     },
64     style_pwd_input:{
65         backgroundColor:'#fff',
66         height:35
67     },
68     style_view_commit:{
69         marginTop:15,
70         marginLeft:10,
71         marginRight:10,
72         backgroundColor:'#63bbff',
73         height:35,
74         borderRadius:5,
75         justifyContent:'center',
76         alignItems:'center'
77     },
78     style_view_unlogin:{
79         fontSize:12,
80         color:'#63bbff',
81         marginLeft:10,
82     },
83     style_view_register:{
84         fontSize:12,
85         color:'#63bbff',
86         marginRight:10,
87         alignItems:'flex-end',
88         flex:1,
89         flexDirection:'row',
90         textAlign:'right'
91     }
92 });
93 
94 AppRegistry.registerComponent('MyProject2', () => MyProject2);

View Code