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