...
|
...
|
@@ -34,8 +34,8 @@ export default class Login extends Component { |
|
|
|
|
|
|
|
|
renderUserText() {
|
|
|
return (
|
|
|
<View style={styles.textContainer}>
|
|
|
return (
|
|
|
<View style={styles.textContainer}>
|
|
|
<TextInput
|
|
|
style={styles.username}
|
|
|
placeholder='账号'
|
...
|
...
|
@@ -51,46 +51,47 @@ export default class Login extends Component { |
|
|
}
|
|
|
/>
|
|
|
</TouchableWithoutFeedback>
|
|
|
</View>
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
renderPwdText() {
|
|
|
return (
|
|
|
<View style={styles.textContainer}>
|
|
|
<TextInput
|
|
|
style={styles.pwd}
|
|
|
secureTextEntry={this.props.isDisplayPwd?false:true}
|
|
|
placeholder={'密码'}
|
|
|
underlineColorAndroid='transparent'
|
|
|
onChangeText={this.props.onPwdChange}
|
|
|
value={this.props.pwd}
|
|
|
/>
|
|
|
<TouchableWithoutFeedback
|
|
|
onPress={this.props.onShowPwdPress}>
|
|
|
<Image
|
|
|
style={styles.buttonDelete}
|
|
|
source={require('../images/eyes@2x.png')}
|
|
|
<View style={styles.textContainer}>
|
|
|
<TextInput
|
|
|
style={styles.pwd}
|
|
|
secureTextEntry={this.props.isDisplayPwd?false:true}
|
|
|
placeholder={'密码'}
|
|
|
underlineColorAndroid='transparent'
|
|
|
onChangeText={this.props.onPwdChange}
|
|
|
value={this.props.pwd}
|
|
|
/>
|
|
|
</TouchableWithoutFeedback>
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
<TouchableWithoutFeedback
|
|
|
onPress={this.props.onShowPwdPress}>
|
|
|
<Image
|
|
|
style={styles.buttonDelete}
|
|
|
source={require('../images/eyes@2x.png')}
|
|
|
/>
|
|
|
</TouchableWithoutFeedback>
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
<View style={styles.container}>
|
|
|
<Image
|
|
|
style={styles.logo}
|
|
|
source={require('../images/logo@2x.png')}
|
|
|
/>
|
|
|
{this.renderUserText()}
|
|
|
{this.renderPwdText()}
|
|
|
<Button style={styles.button}
|
|
|
textStyle={styles.buttonText}
|
|
|
onPress={this.props.onLoginPress}>
|
|
|
|
|
|
<Image style={styles.container} source={require('../images/login@2x.png')} resizeMode={'cover'} >
|
|
|
<Image
|
|
|
style={styles.logo}
|
|
|
source={require('../images/logo@2x.png')}
|
|
|
/>
|
|
|
{this.renderUserText()}
|
|
|
{this.renderPwdText()}
|
|
|
<Button style={styles.button}
|
|
|
textStyle={styles.buttonText}
|
|
|
onPress={this.props.onLoginPress}>
|
|
|
登录
|
|
|
</Button>
|
|
|
</View>
|
|
|
</Image>
|
|
|
);
|
|
|
}
|
|
|
}
|
...
|
...
|
@@ -98,6 +99,7 @@ export default class Login extends Component { |
|
|
let {height, width} = Dimensions.get('window');
|
|
|
let textPaddingTop = height * 7 / 10;
|
|
|
let buttonMargin = (width - 320) / 2;
|
|
|
let inputWidth = width-40;
|
|
|
var styles = StyleSheet.create({
|
|
|
container:{
|
|
|
flex: 1,
|
...
|
...
|
@@ -106,45 +108,44 @@ var styles = StyleSheet.create({ |
|
|
justifyContent: 'center',
|
|
|
width: width,
|
|
|
height: height,
|
|
|
backgroundColor: 'gray'
|
|
|
},
|
|
|
textContainer:{
|
|
|
flexDirection: 'row',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
marginTop:13,
|
|
|
backgroundColor: '#7fffffff',
|
|
|
width:330,
|
|
|
width:inputWidth,
|
|
|
height:40,
|
|
|
justifyContent: 'center',
|
|
|
borderRadius:5,
|
|
|
backgroundColor: 'gray',
|
|
|
marginBottom: 10,
|
|
|
},
|
|
|
logo: {
|
|
|
width:256,
|
|
|
height:40,
|
|
|
marginBottom: 10,
|
|
|
marginBottom: 40,
|
|
|
},
|
|
|
username: {
|
|
|
flex: 1,
|
|
|
height:40,
|
|
|
paddingLeft:10,
|
|
|
borderColor: 'gray',
|
|
|
borderWidth: 1
|
|
|
|
|
|
|
|
|
},
|
|
|
pwd: {
|
|
|
flex: 1,
|
|
|
paddingLeft:10,
|
|
|
borderColor: 'gray',
|
|
|
borderWidth: 1
|
|
|
|
|
|
},
|
|
|
button: {
|
|
|
marginLeft: buttonMargin,
|
|
|
marginRight: buttonMargin,
|
|
|
marginTop: 40,
|
|
|
backgroundColor: '#7fffffff',
|
|
|
marginLeft: 20,
|
|
|
marginRight: 20,
|
|
|
backgroundColor: '#ffffff',
|
|
|
opacity:0.5,
|
|
|
borderWidth:0,
|
|
|
borderRadius:5,
|
|
|
},
|
|
|
buttonText: {
|
|
|
color: '#ffffff',
|
|
|
color: 'black',
|
|
|
fontSize: 18,
|
|
|
},
|
|
|
buttonDelete: {
|
...
|
...
|
|