huiliao-app/huiliaoAPP/src/pages/Login/index.js

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View,StatusBar,Image ,Text,Dimensions,AsyncStorage} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {Button} from 'antd-mobile-rn';
import commonStyle from '../../styles/styles.js';
import LoginInput from '../../components/LoginInput';
import {Device ,Icon} from '../../tool'

import Leancloud from '../../leancloud'

const {width,height} = Dimensions.get('window');


class LoginScreen extends Component{
  static navigationOptions = {title: '登录',header:null}
  async componentWillMount(){

    let user = JSON.parse(await AsyncStorage.getItem('USERINFO'))
    if(user) {
      this.setState({
        telphone:user.telphone,
        password:user.password
      },()=>{
        this.submit()
      })
     
    }

  }
  constructor(props){
    super(props)
    this.state={
      telphone:"",
      password:""
    }
  }
  submit(){
    const {navigation} = this.props
    const {telphone,password} = this.state
    Leancloud.login(telphone,password,navigation)
  }
  
  render(){
    const {telphone,password} = this.state
    return (
      <View style={[commonStyle.page,{backgroundColor:'#fff'}]}>
      <KeyboardAwareScrollView
      extraScrollHeight={50}
      >
      <StatusBar  
         animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden  
         hidden={true}  //是否隐藏状态栏。  
         translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
         barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')   
        >  
        </StatusBar>  
        <View style={styles.bgView}>
          <Image source={Icon.Login.bg} style={styles.bgViewImage}></Image>
        </View>

        <View style={[styles.form,{}]}>
            <Text style={{fontSize:Device.scale(17),color:'#b3b3b3',marginTop:Device.scale(10)}}>登录</Text>
            <Image source={Icon.Login.line} style={{height:2,width:Device.scale(60),marginTop:Device.scale(10)}}></Image>
            <LoginInput type='text' style={{marginTop:Device.scale(45)}}
              onChange={(telphone)=>{
                this.setState({
                  telphone
                })
              }}
              text={telphone}
            ></LoginInput>
            <LoginInput type='password' placeholder='请输入密码' style={{marginTop:Device.scale(30)}}
              onChange={(password)=>{
                this.setState({
                  password
                })
              }}
              text={password}
            ></LoginInput>
          <Button type="primary" onClick={
            ()=>this.submit()
          }
            style={styles.btn}
            >
            <Text style={{fontSize:Device.scale(14)}}>立即登录</Text>
            </Button>
        </View>
        </KeyboardAwareScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  bgView:{
    width:Device.scale(375),
    flex:1,
    height:Device.scale(667),
  },
  bgViewImage:{
    width:Device.scale(375),
    height:Device.scale(667),
  },
  form:{
    width:Device.scale(325),
    height:Device.scale(330),
    left:Device.scale(24),
    top:Device.scale(217),
    position:'absolute',
    padding:Device.scale(26),
    alignItems:'center',
    // borderWidth:1,
    // borderColor:'red',
    // borderStyle:'solid'
  },
  btn:{
    width:Device.scale(280),
    height:Device.scale(40),
    borderRadius:Device.scale(20),
    marginTop:Device.scale(40)
  }

});

export default (LoginScreen);