kdxcxs
4 years ago
5 changed files with 135 additions and 0 deletions
@ -0,0 +1,9 @@ |
|||||
|
/** |
||||
|
* @format |
||||
|
*/ |
||||
|
|
||||
|
import {AppRegistry} from 'react-native'; |
||||
|
import App from './src/App'; |
||||
|
import {name as appName} from './app.json'; |
||||
|
|
||||
|
AppRegistry.registerComponent(appName, () => App); |
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react'; |
||||
|
import {StyleSheet, View} from 'react-native'; |
||||
|
import {StatusBarHeight} from './api/StatusBarHeight'; |
||||
|
import YooLogin from './component/YooLogin'; |
||||
|
import {YooBackground} from './ui/YooBackground'; |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
margin: 0, |
||||
|
padding: 0, |
||||
|
paddingTop: StatusBarHeight, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
export default function App() { |
||||
|
return ( |
||||
|
<View style={styles.container}> |
||||
|
<YooBackground /> |
||||
|
<YooLogin /> |
||||
|
</View> |
||||
|
); |
||||
|
} |
@ -0,0 +1,12 @@ |
|||||
|
import React, {Component} from 'react'; |
||||
|
import YooLoginUI from '../ui/YooLoginUI'; |
||||
|
|
||||
|
export default class YooLogin extends Component { |
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
return <YooLoginUI />; |
||||
|
} |
||||
|
} |
@ -0,0 +1,20 @@ |
|||||
|
import React from 'react'; |
||||
|
import {View, Image, StyleSheet} from 'react-native'; |
||||
|
|
||||
|
export function YooBackground() { |
||||
|
const styles = StyleSheet.create({ |
||||
|
backgroundContainer: { |
||||
|
width: '100%', |
||||
|
height: '100%', |
||||
|
position: 'absolute', |
||||
|
zIndex: -1, |
||||
|
}, |
||||
|
}); |
||||
|
return ( |
||||
|
<View style={styles.backgroundContainer}> |
||||
|
<Image |
||||
|
source={require('../../assets/pawel-czerwinski-aelD0Zrmsy0-unsplash.jpg')} |
||||
|
/> |
||||
|
</View> |
||||
|
); |
||||
|
} |
@ -0,0 +1,72 @@ |
|||||
|
import React, {Component} from 'react'; |
||||
|
import { |
||||
|
View, |
||||
|
StyleSheet, |
||||
|
Image, |
||||
|
TextInput, |
||||
|
TouchableOpacity, |
||||
|
Text, |
||||
|
} from 'react-native'; |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
flex: 1, |
||||
|
alignItems: 'center', |
||||
|
}, |
||||
|
logo: { |
||||
|
marginTop: 120, |
||||
|
width: 200, |
||||
|
height: 200, |
||||
|
marginBottom: 16, |
||||
|
}, |
||||
|
input: { |
||||
|
marginBottom: 24, |
||||
|
padding: 0, |
||||
|
fontSize: 24, |
||||
|
height: 38, |
||||
|
textAlign: 'center', |
||||
|
width: 280, |
||||
|
backgroundColor: 'white', |
||||
|
opacity: 0.3, |
||||
|
}, |
||||
|
button: { |
||||
|
justifyContent: 'center', |
||||
|
alignItems: 'center', |
||||
|
backgroundColor: '#1c90ce', |
||||
|
width: 100, |
||||
|
height: 50, |
||||
|
borderRadius: 8, |
||||
|
}, |
||||
|
buttonText: { |
||||
|
fontWeight: 'bold', |
||||
|
color: '#4d4c4d', |
||||
|
fontSize: 26, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
function LoginInput(props) { |
||||
|
return props.type === 'username' ? ( |
||||
|
<TextInput style={styles.input} placeholder={'账号'} maxLength={10} /> |
||||
|
) : ( |
||||
|
<TextInput |
||||
|
style={styles.input} |
||||
|
placeholder={'密码'} |
||||
|
secureTextEntry={true} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default class YooLoginUI extends Component { |
||||
|
render() { |
||||
|
return ( |
||||
|
<View style={styles.container}> |
||||
|
<Image source={require('../../assets/icon.png')} style={styles.logo} /> |
||||
|
<LoginInput type={'username'} /> |
||||
|
<LoginInput type={'password'} /> |
||||
|
<TouchableOpacity style={styles.button}> |
||||
|
<Text style={styles.buttonText}>登录</Text> |
||||
|
</TouchableOpacity> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue