nuevo menu

src/scenes/Menu.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { ScrollView, View, Text, TouchableOpacity, Image } from 'react-native';
 import { connect } from 'react-redux';
 import { Actions } from 'react-native-router-flux';
 
@@ -8,60 +8,63 @@ import { logout } from '../actions/LocalStorageActions';
 
 class Menu extends Component {
 
-	render() {
+	menuButton(onPress, source, text) {
 		return (
-			<View style={{ flex: 1 }}>
-				<TouchableOpacity onPress={() => Actions.ListaCursadas()}>
-				<Card>
-					<CardSection>
-						<Text>Cursadas</Text>
-					</CardSection>
-				</Card>
-				</TouchableOpacity>
-
-				<TouchableOpacity onPress={() => Actions.Live()}>
-				<Card>
-					<CardSection>
-						<Text>Curso en vivo</Text>
+			<TouchableOpacity onPress={onPress} style={{flex:1}}>
+				<Card style={{backgroundColor: '#fff'}}>
+					<CardSection style={styles.imageContainer}>
+						<Image source={source} style={styles.images} resizeMode='contain' />
 					</CardSection>
-				</Card>
-				</TouchableOpacity>
-
-				<TouchableOpacity onPress={() => Actions.LSClases()}>
-				<Card>
-					<CardSection>
-						<Text>Clases descargadas</Text>
+					<CardSection style={{alignSelf:'center',justifyContent:'center'}}>
+						<Text style={{fontSize:14}}>{text}</Text>
 					</CardSection>
 				</Card>
-				</TouchableOpacity>
-
-				<TouchableOpacity>
-				<Card>
-					<CardSection>
-					<Text>Perfil</Text>
-					</CardSection>
-				</Card>
-				</TouchableOpacity>
-
-				<TouchableOpacity onPress={() => Actions.About()}>
-				<Card>
-					<CardSection>
-					<Text>Como llegar / acerca de / ??</Text>
-					</CardSection>
-				</Card>
-				</TouchableOpacity>
+			</TouchableOpacity>
+		);
+	}
 
-				<TouchableOpacity onPress={() => logout()}>
-				<Card>
-					<CardSection>
-					<Text>Salir</Text>
-					</CardSection>
-				</Card>
-				</TouchableOpacity>
+	render() {
+		const localClases = require('../../img/clases-guardadas.png');
+		const directions = require('../../img/como-llego.png');
+		const profile = require('../../img/mi-perfil.png');
+		const cursadas = require('../../img/cursadas.png');
+		const live = require('../../img/curso-vivo.png');
 
-			</View>
+		return (
+			<ScrollView style={{ flex: 1, backgroundColor: '#eee' }}>
+				<View style={styles.row}>
+					{this.menuButton(Actions.ListaCursadas, cursadas, 'Cursadas' )}
+					{this.menuButton(Actions.LSClases, localClases, 'Clases Descargadas' )}
+				</View>
+				<View style={styles.row}>
+					{this.menuButton(Actions.Live, live, 'Curso en vivo' )}
+					{this.menuButton(Actions.Perfil, profile, 'Perfil' )}
+				</View>
+				<View style={styles.row}>
+					{this.menuButton(Actions.About, directions, 'Cómo llego?' )}
+					{this.menuButton(Actions.About, localClases, 'Salir' )}
+				</View>
+			</ScrollView>
 		);
 	}
 }
 
+const styles = {
+	row: {
+		marginLeft: 10,
+		marginRight: 10,
+		marginBottom: 5,
+		flexDirection: 'row'
+	},
+	images: {
+		height: 90,
+	},
+	imageContainer: {
+		height: 140,
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'relative'
+	}
+}
+
 export default connect(null, { logout })(Menu);