power_sensor/jscore/pages/Outside/Login.js

import React, { Component } from 'react'
import { StyleSheet, View, Text, Alert, TouchableOpacity, Image } from 'react-native'
import { connect } from 'react-redux'
import { Button, InputItem, List, WhiteSpace, WingBlank } from '@ant-design/react-native';

import { createAction, ScreenUtil } from '../../utils'
import {NavigationActions} from "react-navigation";

@connect(auth => ({...auth}))
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      username: '',
      password: ''
    };
  }


  onLogin = () => {
      if(this.state.username == ''){
          Alert.alert('提示', '请输入用户名！');
          return
      }
      if(this.state.password == ''){
          Alert.alert('提示', '请输入密码！');
          return
      }
    this.props.dispatch(createAction('auth/login')(this.state))
  }

  renderMessage = content => (
    <Text style={{ marginBottom: 24 }}>{content}</Text>
  );

  render() {
    const {
      loading,
     } = this.props.auth
    return (
      <View style={styles.container}>
        <View style={styles.logoContainer}>
          <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>
        </View>
        <WhiteSpace size="xl" />
        <List style={styles.list}>
            <InputItem
              clear
              value={this.state.username}
              onChange={value => {
                this.setState({
                  username:value,
                });
              }}
            >用户名:</InputItem>   
            <InputItem
              clear
              type="password"
              value={this.state.password}
              onChange={value => {
                this.setState({
                  password:value,
                });
              }}
            >密码:</InputItem>     
        </List>
        <WhiteSpace />
        <WingBlank>
          <Button loading={loading} onPress={this.onLogin} type="primary">登录</Button>
        </WingBlank>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
  },  
  logoContainer:{
    alignItems:'center',
    marginTop: 60
  },
  logo: {
    width:ScreenUtil.scaleSize(80),
    height:ScreenUtil.scaleSize(80),
  },  
  list: {
    marginTop: 10
  }
})


export default Login