React-Native开发（三）---仿QQ登录页面

最新推荐文章于 2018-12-28 09:42:44 发布

鹏鹏_peng

最新推荐文章于 2018-12-28 09:42:44 发布

阅读量2k

点赞数

分类专栏： React-Native 文章标签： native app

本文链接：https://blog.csdn.net/u010464084/article/details/51659671

版权

React-Native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
} from 'react-native';
class Longin extends Component {
  render() {
    return(
      <View
        style={{backgroundColor:'#f4f4f4',flex:1}}>
        <Image
          style={styles.style_image}
          source={require('./app_icon.png')}/>
        <TextInput style={styles.style_user_input}
          placeholder='QQ号/手机号/邮箱'
          numberOfLines={1}
          autoFocus={true}
          underlineColorAndroid={'transparent'}
          textAlign='center'/>
        <View
             style={{height:1,backgroundColor:'#f4f4f4'}}
         />
         <TextInput style={styles.style_pwd_input}
           placeholder='请输入密码'
           numberOfLines={1}
           secureTextEntry={true}
           textAlign='center'/>

         <View
           style={styles.style_view_commit}>
           <Text style={{color:'#fff'}}>
             登录
           </Text>
         </View>
         <View style={{flex:1,flexDirection:'row',alignItems:'flex-end',bottom:20}}>
           <Text style={styles.style_view_unlogin}>无法登录？
           </Text>
           <Text style={styles.style_view_regiester}>新用户
           </Text>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  style_image:{
    borderRadius:35,
    height:70,
    width:70,
    marginTop:40,
    alignSelf:'center',
  },
  style_user_input:{
      backgroundColor:'#fff',
      marginTop:10,
      height:35,
  },
   style_pwd_input:{
      backgroundColor:'#fff',
      height:35,
  },
   style_view_commit:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      height:35,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_unlogin:{
    fontSize:12,
    color:'#63B8FF',
    marginLeft:10,
  },
  style_view_register:{
    fontSize:12,
    color:'#63B8FF',
    marginRight:10,
    alignItems:'flex-end',
    flex:1,
    flexDirection:'row',
    textAlign:'right',
  }
});
module.exports = Longin;