From 3d4af0c18afcbc90893901b0f20d581eb8b19dc0 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Mon, 30 Nov 2020 00:40:03 +0800
Subject: [PATCH] feat: init login ui

---
 index.js                  |  9 +++++
 src/App.js                | 22 ++++++++++++
 src/component/YooLogin.js | 12 +++++++
 src/ui/YooBackground.js   | 20 +++++++++++
 src/ui/YooLoginUI.js      | 72 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 135 insertions(+)
 create mode 100644 index.js
 create mode 100644 src/App.js
 create mode 100644 src/component/YooLogin.js
 create mode 100644 src/ui/YooBackground.js
 create mode 100644 src/ui/YooLoginUI.js

diff --git a/index.js b/index.js
new file mode 100644
index 0000000..69303b3
--- /dev/null
+++ b/index.js
@@ -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);
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..e7fd977
--- /dev/null
+++ b/src/App.js
@@ -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>
+  );
+}
diff --git a/src/component/YooLogin.js b/src/component/YooLogin.js
new file mode 100644
index 0000000..be7e6ac
--- /dev/null
+++ b/src/component/YooLogin.js
@@ -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 />;
+  }
+}
diff --git a/src/ui/YooBackground.js b/src/ui/YooBackground.js
new file mode 100644
index 0000000..9257aea
--- /dev/null
+++ b/src/ui/YooBackground.js
@@ -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>
+  );
+}
diff --git a/src/ui/YooLoginUI.js b/src/ui/YooLoginUI.js
new file mode 100644
index 0000000..05d0199
--- /dev/null
+++ b/src/ui/YooLoginUI.js
@@ -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>
+    );
+  }
+}