feat: add splash page

README.md

@@ -13,4 +13,5 @@
 - [ ] 添加应用图标
 - [ ] 适配 iOS 登录失败 toast
 - [ ] 在启动时检测是否已登录
+- [ ] Splash 检测网络出错后在 Splash UI 中显示错误并不跳转
 

src/Router.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {View, Animated, Dimensions} from 'react-native';
-import {YooLogin, YooForum} from './component/index';
+import {YooLogin, YooForum, YooSplash} from './component/index';
 
 const width = Dimensions.get('window').width;
 
@@ -8,20 +8,24 @@ export default class Router extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentX: new Animated.Value(0),
+      currentPage: 'splash',
-      nextX: new Animated.Value(width),
+      splashX: new Animated.Value(0),
+      loginX: new Animated.Value(width),
+      forumX: new Animated.Value(width),
     };
     this.gotoForum = this.gotoForum.bind(this);
+    this.gotoLogin = this.gotoLogin.bind(this);
   }
 
-  gotoForum() {
+  gotoLogin() {
+    this.setState({currentPage: 'login'});
     Animated.parallel([
-      Animated.timing(this.state.currentX, {
+      Animated.timing(this.state.splashX, {
         toValue: -width,
         duration: 500,
         useNativeDriver: false,
       }),
-      Animated.timing(this.state.nextX, {
+      Animated.timing(this.state.loginX, {
         toValue: 0,
         duration: 500,
         useNativeDriver: false,
@@ -29,13 +33,46 @@ export default class Router extends Component {
     ]).start();
   }
 
+  gotoForum() {
+    if (this.state.currentPage === 'splash') {
+      Animated.parallel([
+        Animated.timing(this.state.splashX, {
+          toValue: -width,
+          duration: 500,
+          useNativeDriver: false,
+        }),
+        Animated.timing(this.state.forumX, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(this.state.loginX, {
+          toValue: -width,
+          duration: 500,
+          useNativeDriver: false,
+        }),
+        Animated.timing(this.state.forumX, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    }
+  }
+
   render() {
     return (
       <View>
-        <Animated.View style={{left: this.state.currentX}}>
+        <Animated.View style={{left: this.state.splashX}}>
-          <YooLogin onSuccess={this.gotoForum} />
+          <YooSplash gotoLogin={this.gotoLogin} gotoForum={this.gotoForum} />
+        </Animated.View>
+        <Animated.View style={{left: this.state.loginX}}>
+          <YooLogin gotoForum={this.gotoForum} />
         </Animated.View>
-        <Animated.View style={{left: this.state.nextX}}>
+        <Animated.View style={{left: this.state.forumX}}>
           <YooForum />
         </Animated.View>
       </View>

src/component/YooLogin.js

@@ -49,7 +49,7 @@ export default class YooLogin extends Component {
           onFail();
           CookieManager.clearAll();
         } else if (/<title>(.|\n)*网络课程(.|\n)*<\/title>/.test(response)) {
-          this.props.onSuccess();
+          this.props.gotoForum();
         }
       })
       .catch(onFail);

src/component/YooSplash.js

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import {ToastAndroid} from 'react-native';
+import YooSplashUI from '../ui/YooSplashUI';
+import {post} from '../api/HTTP';
+import CookieManager from '@react-native-community/cookies';
+
+export default class YooSplash extends Component {
+  componentDidMount() {
+    post('http://eol.ctbu.edu.cn/meol/loginCheck.do', {
+      headers: {
+        'Cache-Control': 'max-age=0',
+        'Upgrade-Insecure-Requests': '1',
+        Origin: 'http://eol.ctbu.edu.cn',
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'User-Agent': 'YooMooc',
+        Referer:
+          'http://eol.ctbu.edu.cn/meol/common/security/login.jsp?enterLid=46445',
+        'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7',
+      },
+    })
+      .then((response) => {
+        if (/<title>(.|\n)*用户登录(.|\n)*<\/title>/.test(response)) {
+          this.props.gotoLogin();
+          CookieManager.clearAll();
+        } else if (/<title>(.|\n)*网络课程(.|\n)*<\/title>/.test(response)) {
+          this.props.gotoForum();
+        }
+      })
+      .catch(() => ToastAndroid.show('无法连接到服务器', ToastAndroid.SHORT));
+  }
+
+  render() {
+    return <YooSplashUI />;
+  }
+}

src/component/index.js

@@ -1,5 +1,6 @@
 import YooLogin from './YooLogin';
 import YooForum from './YooForum';
 import YooBackground from '../ui/YooBackground';
+import YooSplash from './YooSplash';
 
-export {YooLogin, YooForum, YooBackground};
+export {YooLogin, YooForum, YooBackground, YooSplash};

src/ui/YooSplashUI.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import {View, StyleSheet, Image, Text, ActivityIndicator} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  logo: {
+    marginTop: 120,
+    width: 200,
+    height: 200,
+    marginBottom: 16,
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  indicator: {
+    marginTop: 64,
+  },
+});
+
+export default class YooSplashUI extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Image source={require('../../assets/icon.png')} style={styles.logo} />
+        <Text style={styles.text}>正在检查网络，请稍后</Text>
+        <ActivityIndicator
+          size="large"
+          color="#0000ff"
+          style={styles.indicator}
+        />
+      </View>
+    );
+  }
+}