Finish welcom screen

ListScreen.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  AsyncStorage,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var ListScreen = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <Text>
+          This is the list Screen.
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+});
+
+module.exports = ListScreen;

WelcomeScreen.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  AsyncStorage,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var REQUEST_URL = "http://news-at.zhihu.com/api/4/start-image/1080*1776";
+
+var COVER_KEY = '@WelcomeScreen:cover';
+
+var WelcomeScreen = React.createClass({
+  fetchData: function() {
+    fetch(REQUEST_URL)
+      .then((response) => response.json())
+      .then((responseData) => {
+        //console.log(responseData);
+        this.setState({cover: responseData});
+        //this._onCoverLoaded(responseData);
+      })
+      .done();
+  },
+  async _onCoverLoaded(value) {
+    try {
+      await AsyncStorage.setItem(COVER_KEY, value);
+    } catch (error) {
+      console.log(error);
+    }
+  },
+  componentDidMount: function() {
+    this.fetchData();
+    //this._loadInitialState().done();
+  },
+  async _loadInitialState() {
+    try {
+      var value = await AsyncStorage.getItem(COVER_KEY);
+      if (value !== null){
+        this.setState({cover: value});
+      }
+    } catch (error) {
+    }
+  },
+  getInitialState: function() {
+    return {
+      cover: null,
+    };
+  },
+  renderEmpty: function() {
+    return(
+      <View style={styles.container}>
+        <Text style={styles.title}>
+          知乎日报
+        </Text>
+      </View>
+    );
+  },
+  render: function() {
+    if (!this.state.cover) {
+      return this.renderEmpty();
+    }
+
+    return(
+      <Image
+        source={{uri: this.state.cover.img}}
+        style={styles.cover}>
+        <Text style={styles.text}>
+            {this.state.cover.text}
+        </Text>
+      </Image>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  cover: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#F5FCFF',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: '500',
+  },
+  text: {
+    flex: 1,
+    fontSize: 16,
+    alignSelf: 'flex-end',
+    textAlign: 'center',
+    marginBottom: 10,
+  }
+});
+
+module.exports = WelcomeScreen;

index.android.js

@@ -5,28 +5,44 @@
 'use strict';
 
 var React = require('react-native');
+
 var {
   AppRegistry,
   StyleSheet,
   Text,
   View,
 } = React;
 
+var TimerMixin = require('react-timer-mixin');
+
+var WelcomeScreen = require('./WelcomeScreen');
+var ListScreen = require('./ListScreen');
+
 var RCTZhiHuDaily = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
+  mixins: [TimerMixin],
+  componentDidMount: function() {
+    this.setTimeout(
+      () => {
+        this.setState({splashed: true});
+      },
+      2000
     );
+  },
+  getInitialState: function() {
+    return {
+      splashed: false,
+    };
+  },
+  render: function() {
+    if (!this.state.splashed) {
+      return (
+        <WelcomeScreen />
+      );
+    } else {
+      return (
+        <ListScreen />
+      );
+    }
   }
 });
 

package.json

@@ -6,6 +6,7 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "react-native": "^0.11.0"
+    "react-native": "^0.11.0",
+    "react-timer-mixin": "^0.13.3"
   }
 }