Add splash screen

SplashScreen.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  AsyncStorage,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+} = React;
+
+var Animated = require('Animated');
+
+var REQUEST_URL = "http://news-at.zhihu.com/api/4/start-image/1080*1776";
+
+var COVER_KEY = '@WelcomeScreen:cover';
+
+var WINDOW_WIDTH = Dimensions.get('window').width;
+
+var SplashScreen = React.createClass({
+  fetchData: function() {
+    fetch(REQUEST_URL)
+      .then((response) => response.json())
+      .then((responseData) => {
+        //console.log(responseData);
+        try {
+          AsyncStorage.setItem(COVER_KEY, JSON.stringify(responseData));
+        } catch (error) {
+          console.error(error);
+        }
+      })
+      .done();
+  },
+  async _loadInitialState() {
+    try {
+      var value = await AsyncStorage.getItem(COVER_KEY);
+      var cover = JSON.parse(value);
+      console.log('saved: ' + cover);
+      if (value !== null){
+        this.setState({cover: cover});
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+  getInitialState: function() {
+    return {
+      cover: null,
+      bounceValue: new Animated.Value(1),
+    };
+  },
+  componentDidMount: function() {
+    this.fetchData();
+    this._loadInitialState().done();
+    this.state.bounceValue.setValue(1);
+    Animated.timing(
+      this.state.bounceValue,
+      {
+        toValue: 1.2,
+        duration: 5000,
+      }
+    ).start();
+  },
+  render: function() {
+    var img, text;
+    if (this.state.cover) {
+      img = {uri: this.state.cover.img};
+      text = this.state.cover.text;
+    } else {
+      img = require('image!splash');
+      text = '';
+    }
+
+    return(
+      <View style={styles.container}>
+        <Animated.Image
+          source={img}
+          style={{
+            flex: 1,
+            width: WINDOW_WIDTH,
+            height: 1,
+            transform: [
+              {scale: this.state.bounceValue},
+            ]
+          }} />
+        <Text style={styles.text}>
+            {text}
+        </Text>
+        <Image style={styles.logo} source={require('image!splash_logo')} />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  cover: {
+    flex: 1,
+    width: 200,
+    height: 1,
+  },
+  logo: {
+    resizeMode: 'contain',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 30,
+    height: 54,
+  },
+  text: {
+    flex: 1,
+    fontSize: 16,
+    textAlign: 'center',
+    color: 'white',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 10,
+  }
+});
+
+module.exports = SplashScreen;

index.android.js

@@ -21,7 +21,7 @@ var ToolbarAndroid = require('ToolbarAndroid');
 
 var TimerMixin = require('react-timer-mixin');
 
-var WelcomeScreen = require('./WelcomeScreen');
+var SplashScreen = require('./SplashScreen');
 var ListScreen = require('./ListScreen');
 var StoryScreen = require('./StoryScreen');
 
@@ -40,15 +40,15 @@ var backHandler = {
 }
 
 var RCTZhiHuDaily = React.createClass({
-  // mixins: [TimerMixin],
-  // componentDidMount: function() {
-  //   this.setTimeout(
-  //     () => {
-  //       this.setState({splashed: true});
-  //     },
-  //     50
-  //   );
-  // },
+  mixins: [TimerMixin],
+  componentDidMount: function() {
+    this.setTimeout(
+      () => {
+        this.setState({splashed: true});
+      },
+      2000,
+    );
+  },
   RouteMapper: function(route, navigationOperations, onComponentRef) {
     _navigator = navigationOperations;
     if (route.name === 'home') {
@@ -76,34 +76,21 @@ var RCTZhiHuDaily = React.createClass({
   onActionSelected: function(position) {
   },
   render: function() {
-    var initialRoute = {name: 'home'};
-    return (
-      <Navigator
-        style={styles.container}
-        initialRoute={initialRoute}
-        configureScene={() => Navigator.SceneConfigs.FadeAndroid}
-        renderScene={this.RouteMapper}
-      />
-    );
-    // if (!this.state.splashed) {
-    //   return (
-    //     <WelcomeScreen />
-    //   );
-    // } else {
-    //   return (
-    //     <View style={styles.container}>
-    //       <ToolbarAndroid
-    //         navIcon={require('image!ic_menu_white')}
-    //         title="知乎日报"
-    //         titleColor="white"
-    //         style={styles.toolbar}
-    //         actions={toolbarActions}
-    //         onActionSelected={this.onActionSelected} />
-    //       <ListScreen />
-    //     </View>
-    //
-    //   );
-    // }
+    if (this.state.splashed) {
+      var initialRoute = {name: 'home'};
+      return (
+        <Navigator
+          style={styles.container}
+          initialRoute={initialRoute}
+          configureScene={() => Navigator.SceneConfigs.FadeAndroid}
+          renderScene={this.RouteMapper}
+        />
+      );
+    } else {
+      return (
+        <SplashScreen />
+      );
+    }
   }
 });
 
@@ -112,11 +99,6 @@ var styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
   instructions: {
     textAlign: 'center',
     color: '#333333',