ReactNative实现仿QQ登录页面

ReactNative实现仿QQ登录页面

标签（空格分隔）： React

---

效果图

QQ登录页面.png

在项目根目录新建了一个app文件夹，并创建了一个loginView的js文件，代码如下

loginView.js文件

/**
 * Created by yuanjunliang on 2016/12/6.
 */

import React,{Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput
} from 'react-native';

//适配安卓
var Dimensions = require('Dimensions');
// 获取屏幕宽度
// var screenWidth = Dimensions.get('window').width;

//方式二
var {width,height} = Dimensions.get('window');
var screenWidth = width;

//创建组件
export default class loginView extends Component{
    render() {
        return (
            
                {/*头像*/}
                

                {/*账号和密码*/}
                
                
                {/*登录*/}
                
                    登录
                
                {/*无法登录和新用户*/}
                
                    无法登录
                    新用户
                
                {/*其他登录方式*/}
                
                    其他登录方式
                    
                    
                    
                
            
        );
    }
}

//设置样式
const styles = StyleSheet.create({
   container:{
       flex:1,
       backgroundColor:'#dddddd',
   //    设置侧轴的对齐方式
       alignItems:'center'
   },
    iconStyle:{
       marginTop:50,
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white',
        marginBottom:30
    },
    textInputStyle:{
        height:38,
        width:screenWidth,
        backgroundColor:'white',
        marginBottom:1,
    //    内容居中
        textAlign:'center'
    },
    //登录按钮
    loginBtnStyle:{
        height:44,
        width:screenWidth * 0.9,
        backgroundColor:'green',
        marginTop:30,
    //    设置侧轴对齐方式
        justifyContent:'center',
        alignItems:'center',
    //    设置圆角
        borderRadius:5
    },
    //无法登录和新用户样式
    settingStyle:{
    //    设置主轴方向
        flexDirection:'row',
    //    设置宽度
        width:screenWidth * 0.9,
        height:44,
        alignItems:'center',
    //    设置主轴的对齐方式为两端对齐
        justifyContent:'space-between'
    },
    // 其他登录方式
    otherLoginStyle:{
    //    设置主轴的方向
        flexDirection:'row',
    //    设置侧轴的对齐方式
        alignItems:'center',
    //    绝对定位
    //    设置position为absolute(绝对定位)
        position:'absolute',
        bottom:10,
        left:20
    },
    otherLoginIcon:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:10
    }
});


//导出组件
module.exports = loginView;

app.js文件

var LoginView = require('./app/loginView');

class movie extends React.Component{
    render() {
        return (
            
        );
    }
}

//注册组件
AppRegistry.registerComponent('movie',()=>movie);

资源文件
链接: https://pan.baidu.com/s/1kV0Q9fh 密码: 4ty3