add about page

app/components/Setting.js

@@ -26,7 +26,7 @@ class Setting extends Component {
 
 
     onAboutPress() {
-
+        this.props.router.toAbout()
     }
 
 

app/configs/Router.js

@@ -6,6 +6,7 @@ var Topic = require('../containers/Topic')
 var Comments = require('../containers/Comments')
 var Message = require('../containers/Message')
 var QRCode = require('../containers/QRCode')
+var About = require('../containers/About')
 
 // Config
 var sceneConfig = require('./sceneConfig')
@@ -77,7 +78,17 @@ class Router {
         })
     }
 
-    replaceWithHome(){
+
+    toAbout() {
+        this.push({}, {
+            component: About,
+            name: 'about',
+            sceneConfig: sceneConfig.customFloatFromBottom
+        })
+    }
+
+
+    replaceWithHome() {
         this.navigator.popToTop()
     }
 }

app/configs/config.js

@@ -1,6 +1,16 @@
+var packageObj = require('../../package.json')
+
 module.exports = {
     domain: 'https://cnodejs.org',
     apiPath: '/api/v1',
     bgImgUri: 'http://7lrzfj.com1.z0.glb.clouddn.com/soliury213H.png',
-    replySuffix: '\n\nFrom\040[Noder](https://github.com/soliury/noder-react-native)'
+    replySuffix: '\n\nFrom\040[Noder](https://github.com/soliury/noder-react-native)',
+    sourceInGithub: 'https://github.com/soliury/noder-react-native',
+    sourceNameInGithub: 'noder-react-native',
+    package: packageObj,
+    author: {
+        blog: 'http://lingyong.me',
+        cnodeName: 'soliury'
+    },
+    cnodeAbout: 'https://cnodejs.org/about'
 }

app/configs/sceneConfig.js

@@ -14,8 +14,20 @@ var popGestureConfig = Object.assign({}, baseConfig.gestures.pop, {
 });
 
 
+var fullPopGestureConfig = Object.assign({}, Navigator.SceneConfigs.FloatFromBottom.gestures.pop, {
+    edgeHitWidth: width
+})
+
+
 exports.customFloatFromRight = Object.assign({}, baseConfig, {
     gestures: {
         pop: popGestureConfig
     }
-});
+})
+
+
+exports.customFloatFromBottom = Object.assign({}, Navigator.SceneConfigs.FloatFromBottom, {
+    gestures: {
+        pop: fullPopGestureConfig
+    }
+})

app/containers/About.js

@@ -0,0 +1,165 @@
+var React = require('react-native')
+var BlurView = require('react-native-blur').BlurView
+var { Icon } = require('react-native-icons')
+
+
+var config = require('../configs/config')
+var window = require('../util/window')
+var { width, height } = window.get()
+
+
+var {
+    View,
+    Component,
+    PropTypes,
+    Text,
+    StyleSheet,
+    Image,
+    ActivityIndicatorIOS,
+    TouchableOpacity
+    } = React
+
+class Home extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+
+    _onSourceInGithubPress() {
+        window.link(config.sourceInGithub)
+    }
+
+
+    render() {
+        return (
+            <Image
+                style={styles.bgWall}
+                source={{uri:config.bgImgUri}}
+                >
+                <BlurView
+                    blurType="dark"
+                    style={styles.container}>
+
+
+                    <Image
+                        style={styles.noderLogo}
+                        source={require('image!logo')}
+                        />
+
+
+                    <Text style={styles.title}>Noder
+                        <Text style={{fontSize:18,color:'rgba(255,255,255,0.6)'}}>
+                            {' v' + config.package.version}
+                        </Text>
+                    </Text>
+
+                    <TouchableOpacity onPress={() => window.link(config.cnodeAbout)}>
+                        <Text style={styles.subTitle}>For CNodejs.org</Text>
+                    </TouchableOpacity>
+
+
+                    <TouchableOpacity onPress={() => this.props.router.toUser({
+                        userName:config.author.cnodeName
+                    })}>
+                        <Text style={styles.subTitle}>@soliury</Text>
+                    </TouchableOpacity>
+
+
+                    <Icon
+                        name='ion|ios-arrow-thin-down'
+                        size={60}
+                        color='rgba(255,255,255,0.5)'
+                        style={styles.arrow}/>
+
+
+                    <View style={styles.footer}>
+                        <View style={styles.row}>
+                            <TouchableOpacity onPress={this._onSourceInGithubPress.bind(this)}>
+                                <Icon
+                                    name='ion|social-github'
+                                    size={40}
+                                    color='rgba(255,204,0,1)'
+                                    style={styles.rowIcon}/>
+                            </TouchableOpacity>
+                        </View>
+
+                        <View style={styles.row}>
+                            <TouchableOpacity onPress={()=> window.link(config.author.blog)}>
+                                <Image
+                                    style={styles.blog}
+                                    source={require('image!blog')}
+                                    ></Image>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </BlurView>
+            </Image>
+        )
+    }
+}
+
+Home.propTypes = {
+    actions: PropTypes.object,
+    state: PropTypes.object
+}
+
+var styles = StyleSheet.create({
+    bgWall: {
+        height: height,
+        width: width
+    },
+    noderLogo: {
+        height: 150,
+        width: 150
+    },
+    container: {
+        width: width,
+        height: height,
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: 30
+    },
+    title: {
+        marginTop: 20,
+        fontSize: 30,
+        color: 'rgba(255,255,255,0.7)',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(255,255,255,0.1)',
+
+    },
+    subTitle: {
+        marginTop: 10,
+        fontSize: 16,
+        color: 'rgba(255,255,255,0.5)'
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        height: 40,
+        alignItems: 'center'
+    },
+    rowIcon: {
+        height: 40,
+        width: 40
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        width: width,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    arrow: {
+        marginTop: 40,
+        height: 50,
+        width: 50
+    },
+    blog: {
+        height: 20,
+        width: 100,
+        opacity: 0.5
+    }
+})
+
+module.exports = Home

iOS/Images.xcassets/blog.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x",
+      "filename" : "[email protected]"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x",
+      "filename" : "[email protected]"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x",
+      "filename" : "[email protected]"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

iOS/Images.xcassets/logo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x",
+      "filename" : "[email protected]"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x",
+      "filename" : "[email protected]"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x",
+      "filename" : "[email protected]"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

package.json

@@ -10,6 +10,7 @@
     "moment": "2.10.3",
     "query-string": "2.3.0",
     "react-native": "0.7.1",
+    "react-native-blur": "^0.5.4",
     "react-native-button": "1.2.0",
     "react-native-camera": "0.3.3",
     "react-native-html-render": "^1.0.2",