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 (
+
+
+
+
+ );
+}
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 ;
+ }
+}
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 (
+
+
+
+ );
+}
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' ? (
+
+ ) : (
+
+ );
+}
+
+export default class YooLoginUI extends Component {
+ render() {
+ return (
+
+
+
+
+
+ 登录
+
+
+ );
+ }
+}