Logout.js 2.78 KB
'use strict';

import React from 'react-native';
import Button from 'apsl-react-native-button';

let {
    StyleSheet,
    Component,
    View,
    Image,
    Text,
    Dimensions,
    TextInput,
    TouchableWithoutFeedback,
    Platform
} = React;

export default class Login extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        account: React.PropTypes.string,
        username: React.PropTypes.string,
        pwd: React.PropTypes.string,
        onLogoutPress:React.PropTypes.func,
        onModifyPress:React.PropTypes.func,
    };

	render() {

        return (
          <View style={styles.container}>
              <View style={styles.accountContainer }>
                <Text style={styles.text}>
                  账号:{this.props.username}
                </Text>
              </View>
              <View style={styles.line}/>
              <TouchableWithoutFeedback
                  onPress={this.props.onModifyPress}>
                <View style={styles.pwdContainer }>
                    <Text style={styles.text}>
                      修改密码
                    </Text>
                    <Image
                      style={styles.icon}
                      source={require('../images/grey.png')}
                    />
                </View>
              </TouchableWithoutFeedback>
              <Button style={styles.button}
                textStyle={styles.buttonText}
                onPress={this.props.onLogoutPress}
              >
                退出登录
              </Button>
          </View>
        );
    }
}

let {height, width} = Dimensions.get('window');
let textPaddingTop = height * 7 / 10;
let buttonMargin = (width - 320) / 2;
var styles = StyleSheet.create({
    container:{
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center',
      width: width,
      height: height,
      top:(Platform.OS === 'android') ? 50 : 64,
      backgroundColor: '#F5FCFF'
    },
    accountContainer:{
      width: width,
      height: 40,
      marginTop:15,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white'
    },
    pwdContainer:{
      width: width,
      height: 40,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white'
    },
    text:{
      flex:1,
      marginLeft: buttonMargin,
      marginRight: buttonMargin,
      color:'black',

    },
    button: {
      marginLeft: buttonMargin,
      marginRight: buttonMargin,
      marginTop: 20,
      backgroundColor: '#d0021b',
      borderRadius:5,
    },
    buttonText: {
      color: '#ffffff',
      fontSize: 18,
    },
    line:{
      width: width,
      height: 1,
      
    },
    icon: {
    
    marginRight:10,
  },
});