react native login

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);