diff --git a/App.js b/App.js index 62b5a4c..14832d3 100644 --- a/App.js +++ b/App.js @@ -23,6 +23,7 @@ import {Navigation} from 'react-native-navigation'; import Color from './src/style/color'; import Api from './src/util/api'; +import BottomNav from './src/nav/bottomNav'; import Loading from './src/component/loading'; import LoginForm from './src/component/loginForm'; @@ -55,14 +56,28 @@ export default class App extends Component { }); } + _onSucc() { + Api.getSplashByStore() + .then(splash => { + Navigation.setRoot(BottomNav.config(splash)); + }) + .done(); + } + render() { return ( {this.state.isLoginPage - ? () - : ()} + ? () + : ()} diff --git a/index.js b/index.js index 9c488a0..d3c359e 100644 --- a/index.js +++ b/index.js @@ -9,10 +9,15 @@ import {Icon, loadIcon} from './src/style/icon'; import App from './App'; import Token from './src/util/token'; +import Api from './src/util/api'; import PageList from './src/page/_list'; import BottomNav from './src/nav/bottomNav'; +// for debug +// console.disableYellowBox = true; + + Navigation.registerComponent('Timepill', () => App); // regist screens automatically for(let pageName in PageList) { @@ -81,6 +86,11 @@ Navigation.events().registerAppLaunchedListener(async () => { Alert.alert("loadIcon err: " + err.toString()); } + try { + await Api.syncSplash(); + } catch (err) {} + + let token = await Token.getUserToken(); // let token; if(!token) { diff --git a/src/component/diary/diaryList.js b/src/component/diary/diaryList.js index 18b0268..208ff70 100644 --- a/src/component/diary/diaryList.js +++ b/src/component/diary/diaryList.js @@ -10,7 +10,6 @@ import { } from 'react-native'; import {Navigation} from 'react-native-navigation'; import {Divider} from "react-native-elements"; -import ActionSheet from 'react-native-actionsheet-api'; import Color from '../../style/color'; import Msg from '../../util/msg'; @@ -248,7 +247,7 @@ export default class DiaryList extends Component { onEndReached={this.state.hasMore ? this.loadMore.bind(this) : null} > - + ); } diff --git a/src/component/loginForm.js b/src/component/loginForm.js index eb2ad0d..5f58e6b 100644 --- a/src/component/loginForm.js +++ b/src/component/loginForm.js @@ -37,7 +37,7 @@ export default class LoginForm extends Component { _checkResult(result) { InteractionManager.runAfterInteractions(() => { if(result.isLoginSucc) { - Navigation.setRoot(BottomNav.config()); + this.props.onLoginSucc(); } else { Alert.alert( diff --git a/src/nav/bottomNav.js b/src/nav/bottomNav.js index 1a2b62a..04a8bb7 100644 --- a/src/nav/bottomNav.js +++ b/src/nav/bottomNav.js @@ -1,7 +1,7 @@ import Color from '../style/color' import {Icon} from '../style/icon' -function config() { +function config(splash) { return { root: { bottomTabs: { @@ -19,11 +19,23 @@ function config() { name: 'Home', options: { topBar: { - // visible: false, + visible: false, + animate: false + + /* title: { text: '首页' } + */ + }, + bottomTabs: { + visible: false, + animate: false } + + }, + passProps: { + splash: splash } } }], diff --git a/src/page/AboutPage.js b/src/page/AboutPage.js index 75c853e..d80bbfa 100644 --- a/src/page/AboutPage.js +++ b/src/page/AboutPage.js @@ -8,7 +8,7 @@ import { } from 'react-native'; import Api from '../util/api'; -import TokenManager from '../util/token'; +import Token from '../util/token'; import Event from '../util/event'; import Color from '../style/color'; import UpdateInfo from '../updateInfo'; @@ -36,7 +36,7 @@ export default class AboutPage extends Component { } componentDidMount() { - TokenManager.setUpdateVersion(UpdateInfo.version) + Token.setUpdateVersion(UpdateInfo.version) .then(() => { DeviceEventEmitter.emit(Event.updateNewsRead); }); diff --git a/src/page/HomePage.js b/src/page/HomePage.js index c83f627..6c18b73 100644 --- a/src/page/HomePage.js +++ b/src/page/HomePage.js @@ -1,6 +1,18 @@ import React, {Component} from 'react'; -import {StyleSheet, Text, View, TouchableOpacity, ImageBackground} from 'react-native'; +import { + StyleSheet, + Text, + View, + TouchableOpacity, + ImageBackground, + Animated, + Modal, + TouchableWithoutFeedback, + InteractionManager +} from 'react-native'; import {Navigation} from 'react-native-navigation'; +import {Button} from 'react-native-elements'; +import ActionSheet from 'react-native-actionsheet-api'; import Color from '../style/color' import Api from '../util/api'; @@ -15,11 +27,132 @@ export default class HomePage extends Component { super(props); this.dataSource = new HomeDiaryData(); + let splash = props.splash; this.state = { + hasSplash: splash ? true : false, + + showSplash: true, + fadeInOpacity: new Animated.Value(0), + + splashTime : 3, + splashImage: splash ? splash.image_url : null, + splashLink: splash ? splash.link : null, + topic: null } } + componentDidMount() { + if(this.state.hasSplash) { + this.openSplash(); + + } else { + this.closeSplash(); + } + } + + startTimer() { + this.timer = setInterval(() => { + let newTime = this.state.splashTime - 1; + this.setState({ + splashTime: newTime + }); + + if(newTime == 0) { + this.closeSplash(); + } + + }, 1000); + } + + openSplash() { + Animated.timing( + this.state.fadeInOpacity, + { + toValue: 1, + duration: 1000, + } + + ).start(() => { + this.startTimer(); + }); + } + + closeSplash() { + if(this.timer) { + clearTimeout(this.timer); + } + + Animated.timing( + this.state.fadeInOpacity, + { + toValue: 0, + duration: 500, + } + + ).start(() => { + + Navigation.mergeOptions(this.props.componentId, { + topBar: { + visible: true, + title: { + text: '首页' + } + }, + bottomTabs: { + visible: true + } + }); + + this.setState({ + showSplash: false + }) + + }); + } + + onSplashPress() { + if(this.state.splashLink) { + if(this.timer) { + clearTimeout(this.timer); + } + + Navigation.mergeOptions(this.props.componentId, { + topBar: { + visible: true, + title: { + text: '首页' + } + }, + bottomTabs: { + visible: true + } + }); + + Navigation.push(this.props.componentId, { + component: { + name: 'WebView', + options: { + bottomTabs: { + visible: false, + + // hide bottom tab for android + drawBehind: true, + animate: true + } + }, + passProps: this.state.splashLink.passProps + } + }).then(() => { + + this.setState({ + showSplash: false, + fadeInOpacity: new Animated.Value(0) + }); + }); + } + } + refreshTopic() { Api.getTodayTopic() .then(topic => { @@ -53,14 +186,19 @@ export default class HomePage extends Component { render() { return ( - - this.list = r} - dataSource={this.dataSource} - listHeader={this.renderHeader.bind(this)} - refreshHeader={this.refreshTopic.bind(this)} - {...this.props} - > - + + { + this.state.showSplash ? this.renderModal() : ( + this.list = r} + dataSource={this.dataSource} + listHeader={this.renderHeader.bind(this)} + refreshHeader={this.refreshTopic.bind(this)} + {...this.props} + > + ) + } + + ); } @@ -78,6 +216,36 @@ export default class HomePage extends Component { ) : null; } + + renderModal() { + return ( + {}} + onRequestClose={() => {}} + > + + + + + + +