美文网首页RN
02-React Native搭建QQ登录界面

02-React Native搭建QQ登录界面

作者: 小刘_假装是个程序员 | 来源:发表于2017-11-28 11:48 被阅读11次

    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

    相关文章

      网友评论

        本文标题:02-React Native搭建QQ登录界面

        本文链接:https://www.haomeiwen.com/subject/himsbxtx.html