Browse Source

feat: add splash page

pull/1/head
kdxcxs 4 years ago
parent
commit
f0183fe925
  1. 1
      README.md
  2. 53
      src/Router.js
  3. 2
      src/component/YooLogin.js
  4. 35
      src/component/YooSplash.js
  5. 3
      src/component/index.js
  6. 38
      src/ui/YooSplashUI.js

1
README.md

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

53
src/Router.js

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {View, Animated, Dimensions} from 'react-native'; 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; const width = Dimensions.get('window').width;
@ -8,34 +8,71 @@ export default class Router extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { 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.gotoForum = this.gotoForum.bind(this);
this.gotoLogin = this.gotoLogin.bind(this);
}
gotoLogin() {
this.setState({currentPage: 'login'});
Animated.parallel([
Animated.timing(this.state.splashX, {
toValue: -width,
duration: 500,
useNativeDriver: false,
}),
Animated.timing(this.state.loginX, {
toValue: 0,
duration: 500,
useNativeDriver: false,
}),
]).start();
} }
gotoForum() { gotoForum() {
if (this.state.currentPage === 'splash') {
Animated.parallel([ Animated.parallel([
Animated.timing(this.state.currentX, { Animated.timing(this.state.splashX, {
toValue: -width, toValue: -width,
duration: 500, duration: 500,
useNativeDriver: false, useNativeDriver: false,
}), }),
Animated.timing(this.state.nextX, { Animated.timing(this.state.forumX, {
toValue: 0, toValue: 0,
duration: 500, duration: 500,
useNativeDriver: false, useNativeDriver: false,
}), }),
]).start(); ]).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() { render() {
return ( return (
<View> <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>
<Animated.View style={{left: this.state.nextX}}> <Animated.View style={{left: this.state.forumX}}>
<YooForum /> <YooForum />
</Animated.View> </Animated.View>
</View> </View>

2
src/component/YooLogin.js

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

35
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 />;
}
}

3
src/component/index.js

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

38
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>
);
}
}
Loading…
Cancel
Save