react native login view
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Image, TextInput, Text,ScrollView,TouchableOpacity,View} from 'react-native';
class CoolApp extends React.Component {
render() {
return (
<ScrollView
contentContainerStyle={{flex:1}}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps={false}
>
<View style={styles.container}>
<Image
source={{uri: 'http://oss-hz.qianmi.com/qianmicom/u/cms/qmwww/201511/03102524l6ur.png'}}
style={styles.logo}/>
<TextInput
ref={(username) => this.username = username}
onFocus={()=>this.username.focus()}
style={styles.input}
placeholder='username'/>
<TextInput
ref={(password) => this.password = password}
onFocus={() => this.password.focus()}
style={styles.input}
placeholder='password'
password={true}/>
<TouchableOpacity style={styles.btn}
onPress={() => console.log('press me')}>
<Text style={styles.text}>login</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
paddingLeft: 10,
paddingRight: 10,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F4FCFF',
},
logo:{
width:160,
height:160,
marginTop: 100
},
input: {
height: 40,
width:200,
marginTop: 10, //间隔
borderWidth: 1,
borderRadius: 5, //圆角
borderColor: 'lightblue'
},
text:{
fontWeight: 'bold',
fontSize: 14,
color: '#FFF'
},
btn:{
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#3333FF',
height: 40,
borderRadius: 5,
marginTop: 10
}
});
AppRegistry.registerComponent('AwesomeProject', () => CoolApp);