完成首页

Author: manofit

meiTuan/ios/meiTuan/Info.plist

@@ -41,8 +41,9 @@
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>

meiTuan/src/RootScene.js

@@ -125,7 +125,21 @@ export default class RootScene extends PureComponent {
 
     render(){
         return(
-            <Navigator />
+            <Navigator 
+                onNavigationStateChange={
+                    (prevState, currentState) => {
+                        const currentScene = getCurrentRouteName(currentState)
+                        const previousScene = getCurrentRouteName(prevState)
+                        if (previousScene !== currentScene) {
+                            if (lightContentScenes.indexOf(currentScene) >= 0) {
+                                StatusBar.setBarStyle('light-content')
+                            } else {
+                                StatusBar.setBarStyle('dark-content')
+                            }
+                    }
+                }
+            }
+            />
         )
     }
 

meiTuan/src/scene/GroupPurchaseScene/GroupPurchaseCell.js

@@ -0,0 +1,56 @@
+import React, {PureComponent} from 'react'
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Image,
+} from 'react-native'
+import {Heading1, Heading2, Heading3, Paragraph} from '../../widget/Text'
+import screen from '../../common/screen'
+import system from '../../common/system'
+import color from '../../widget/color'
+
+export default class GroupPurchaseCell extends PureComponent {
+    render(){
+        let {info} = this.props
+        let imageUrl = info.imageUrl.replace('w.h', '160.0')
+        return (
+            <TouchableOpacity style={styles.container} onPress={() => this.props.onPress(info)}>
+                <Image source={{uri: imageUrl}} style={styles.icon} />
+
+                <View style={styles.rightContainer}>
+                    <Heading2>{info.title}</Heading2>
+                    <Paragraph numberOfLine={0} style={{marginTop: 8}}>{info.subtitle}</Paragraph>
+                    <View style={{flex:1, justifyContent:'flex-end'}}>
+                        <Heading2 style={styles.price}>{info.price}元</Heading2>
+                    </View>
+                </View>
+
+            </TouchableOpacity>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        padding: 10,
+        borderBottomWidth: screen.onePixel,
+        borderColor: color.border,
+        backgroundColor: 'white',
+    },
+    icon: {
+        width: 80,
+        height: 80,
+        borderRadius: 5,
+    },
+    rightContainer: {
+        flex: 1,
+        paddingLeft: 20,
+        paddingRight: 10,
+    },
+    price: {
+        color: color.primary
+    }
+})

meiTuan/src/scene/Home/HomeGridItem.js

@@ -0,0 +1,52 @@
+import React, {PureComponent} from 'react'
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Image,
+} from 'react-native'
+import {Heading2, Heading3} from '../../widget/Text'
+import screen from '../../common/screen'
+import system from '../../common/system'
+import color from '../../widget/color'
+
+export default class HomeGridItem extends PureComponent {
+    render(){
+        let info = this.props.info
+
+        let title = info.maintitle
+        let color = info.typeface_color
+        let subtitle = info.deputytitle
+        let imageUrl = info.imageUrl.replace('w.h', '120.0')
+
+        return(
+            <TouchableOpacity style={styles.container} onPress={this.props.onPress}>
+                <View>
+                    <Heading2 style={{color:color, marginBottom: 10}}>{title}</Heading2>
+                    <Heading3>{subtitle}</Heading3>
+                </View>
+
+                <Image style={styles.icon} source={{uri: imageUrl}} />
+            </TouchableOpacity>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: screen.width / 2 - screen.onePixel,
+        height: screen.width / 4,
+        backgroundColor: 'white',
+        borderBottomWidth: screen.onePixel,
+        borderRightWidth: screen.onePixel,
+        borderColor: color.border
+    },
+    icon: {
+        width: screen.width / 5,
+        height: screen.width / 5,
+    }
+})

meiTuan/src/scene/Home/HomeGridView.js

@@ -0,0 +1,45 @@
+import React, {PureComponent} from 'react'
+import {
+    View,
+    Text,
+    StyleSheet,
+} from 'react-native'
+import screen from '../../common/screen'
+import system from '../../common/system'
+import color from '../../widget/color'
+import HomeGridItem from './HomeGridItem'
+
+export default class HomeGridView extends PureComponent {
+    static defaultProps = {
+        infos: []
+    }
+
+    render(){
+        return(
+            <View style={styles.container}>
+                {
+                    this.props.infos.map((info, index) => {
+                        return(
+                            <HomeGridItem
+                                info={info}
+                                key={index}
+                                onPress={() => this.props.onGridSelected(index)}
+                            />
+                        )
+                    })
+                }
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        borderTopWidth: screen.onePixel,
+        borderLeftWidth: screen.onePixel,
+        borderColor: color.border,
+    }
+})

meiTuan/src/scene/Home/HomeMenuView.js

@@ -10,7 +10,6 @@ import screen from '../../common/screen'
 import system from '../../common/system'
 import color from '../../widget/color'
 import HomeMenuItem from './HomeMenuItem'
-import { ECHILD } from 'constants';
 
 export default class HomeMenuView extends PureComponent {
 
@@ -61,8 +60,10 @@ export default class HomeMenuView extends PureComponent {
         return(
             <View style={styles.container}>
                 <ScrollView
+                    pagingEnabled
+                    horizontal
                     showsHorizontalScrollIndicator={false}
-                    onScroll={e => this.onScroll(e)}
+                    onScroll={(e) => this.onScroll(e)}
                 >
                     <View style={styles.menuContainer}>
                         {menuViews}
@@ -72,6 +73,7 @@ export default class HomeMenuView extends PureComponent {
                 <PageControl 
                     style={styles.PageControl}
                     numberOfPages={pageCount}
+                    hidesForSinglePage
                     currentPage={this.state.currentPage}
                     pageIndicatorTintColor='gray'
                     currentPageIndicatorTintColor={color.primary}