From f0183fe92538f22134b343d510408fd8b3359071 Mon Sep 17 00:00:00 2001 From: kdxcxs Date: Wed, 2 Dec 2020 21:22:46 +0800 Subject: [PATCH] feat: add splash page --- README.md | 1 + src/Router.js | 55 +++++++++++++++++++++++++++++++------- src/component/YooLogin.js | 2 +- src/component/YooSplash.js | 35 ++++++++++++++++++++++++ src/component/index.js | 3 ++- src/ui/YooSplashUI.js | 38 ++++++++++++++++++++++++++ 6 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 src/component/YooSplash.js create mode 100644 src/ui/YooSplashUI.js diff --git a/README.md b/README.md index 4a0ff34..872e00a 100644 --- a/README.md +++ b/README.md @@ -13,4 +13,5 @@ - [ ] 添加应用图标 - [ ] 适配 iOS 登录失败 toast - [ ] 在启动时检测是否已登录 +- [ ] Splash 检测网络出错后在 Splash UI 中显示错误并不跳转 diff --git a/src/Router.js b/src/Router.js index a3d81c9..32dd768 100644 --- a/src/Router.js +++ b/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), - nextX: new Animated.Value(width), + currentPage: 'splash', + 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 ( - - + + + + + - + diff --git a/src/component/YooLogin.js b/src/component/YooLogin.js index 2a31b9b..c9e3f56 100644 --- a/src/component/YooLogin.js +++ b/src/component/YooLogin.js @@ -49,7 +49,7 @@ export default class YooLogin extends Component { onFail(); CookieManager.clearAll(); } else if (/(.|\n)*网络课程(.|\n)*<\/title>/.test(response)) { - this.props.onSuccess(); + this.props.gotoForum(); } }) .catch(onFail); diff --git a/src/component/YooSplash.js b/src/component/YooSplash.js new file mode 100644 index 0000000..094b7af --- /dev/null +++ b/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 />; + } +} diff --git a/src/component/index.js b/src/component/index.js index 7dd9bcd..c12805e 100644 --- a/src/component/index.js +++ b/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}; diff --git a/src/ui/YooSplashUI.js b/src/ui/YooSplashUI.js new file mode 100644 index 0000000..ebf5d05 --- /dev/null +++ b/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> + ); + } +}