02-React Native搭建QQ登录界面

App.js

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

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

//引入外部组件
var LoginView = require('./LoginView')

export default class App extends Component<{}> {
  render() {
    return (
     //使用组件
     <LoginView/>
    )
    ;
  }
}

LoginView.js

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


import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';



var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;

class loginView extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        {/*头像*/}
        <Image source={require('./img/01.png')} style={styles.iconStyle}/>
        {/*账号和密码*/}
        <TextInput placeholder={'请输入用户名'} style={styles.textInputStyle}/>
        <TextInput placeholder={'请输入密码'} password={true} style={styles.textInputStyle}/>
        {/*登录*/}
        <View style={styles.loginBtnStyle}>
          <Text style={{color:'white'}}>登录</Text>
        </View>
        {/*设置*/}
        <View style={styles.SettingStyle}>
          <Text>无法登录</Text>
          <Text>新用户</Text>
        </View>
        {/*其他登录方式*/}
        <View style={styles.otherLoginStyle}>
          <Text>其他方式登录</Text>
          <Image source={require('./img/icon_1.png')} style={styles.otherImageStyle}/>
          <Image source={require('./img/icon_2.png')} style={styles.otherImageStyle}/>
          <Image source={require('./img/icon_3.png')} style={styles.otherImageStyle}/>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: '#F5FCFF',
    backgroundColor: '#dddddd',
    alignItems:'center'

  },
  iconStyle:{
    marginTop: 30,
    marginBottom: 30,
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth: 2,
    borderColor: 'white',
  },
  textInputStyle:{
    marginBottom: 1,
    width:width,
    height: 38,
    backgroundColor: 'white',
    textAlign :'center'
  },
  loginBtnStyle:{
    height: 35,
    width :width*0.7,
    marginTop: 30,
    marginBottom: 30,
    backgroundColor: 'lightgreen',

    justifyContent:'center',
    alignItems:'center',
    borderRadius: 8,
  },
  SettingStyle:{
    flexDirection:'row',
    // backgroundColor:'red',

    width: width*0.7,
    justifyContent:'space-between'
  },
  otherLoginStyle:{
    // backgroundColor: 'red',
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    bottom:10,
    left:20,

  } ,
  otherImageStyle:{
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 8,
  }

});

module.exports = loginView;

image.png