123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- //Nathalia A. Alicea
- //código para la implementación de los Tabs y las pantalla de "Sobre Nosotros", "Insignia", "Tienda" y "Contacto"
-
- import * as React from 'react';
- import {useState, useEffect} from 'react';
- import {Text, View, Button, Linking, Image, FlatList, TextInput, StyleSheet, ScrollView } from 'react-native';
- import { NavigationContainer } from '@react-navigation/native';
- import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
- //Json que se están usando como ejemplo de lo que se usaría con una API
- //import JsonNosotros from '../nosotros.json'
- //import insignias from '../insignias.json'
-
- import HomeScreen from '../codes/screen/Homescreen/index';
-
- import fetch_json from '../fetch_json';
-
- //función con código para la pantalla de "Sobre Nosotros" donde la data se extrae de Json files.
- function Nosotros() {
-
- const [jsonNosotros, setNosotros] = useState([]);
- const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=2';
-
- useEffect(() => {
- fetch_json(url, setNosotros);
- });
-
- return (
- <View style = {{
- flex:1,
- alignItems: "center",
- justifyContent: "space-evenly",
- backgroundColor: "#efffea"}}
- >
- <Text></Text>
- <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
- <Text></Text>
- <Text></Text>
- <ScrollView>
- {jsonNosotros.map((item)=>{
- return (
- <View key ={item.key} >
- <Image style = {styles.image} source={{uri: item.imagen}} />
- <Text style={styles.item}>{item.nombre} {item.apellido} </Text>
- <Text style={styles.itemLetters}>{item.descripcion}</Text>
- <Text></Text>
- </View>
- )
- })}
- </ScrollView>
- <ScrollView>
- <View >
- <View>
- <Text style={styles.itemMVV}>Misión</Text>
- <Text style={styles.itemLettersMVV}>Aportar a la transformación hacia la sostenibilidad a nivel individual, empresarial y organizacional a través de la educación y de la promoción y validación de negocios locales que venden productos o servicios sostenibles.</Text>
- </View>
- <View>
- <Text style={styles.itemMVV}>Visión</Text>
- <Text style={styles.itemLettersMVV}>Ser reconocidos globalmente como una organización educativa con confiabilidad y compromiso con la educación sobre la sostenibilidad y la promoción y validación de productos y servicios sostenibles locales, destacando y contribuyendo al bienestar de la ciudadanía, el desarrollo económico local, el comercio justo y la conservación del ambiente.</Text>
- </View>
- <View>
- <Text style={styles.itemMVV}>Valores</Text>
- <Text style={styles.itemLettersMVV}>Educación, Respeto y responsabilidad social y ambiental, Comercio justo, Confiabilidad, Disciplina, Empatía y solidaridad, Equidad, Honestidad, Humanidad y respeto, Integridad y objetividad</Text>
- </View>
- </View>
- </ScrollView>
-
- </View>
- );
-
- }
-
- //función donde se extraen las insignias y las descripciones de las mismas y se muestran en el tab de "Insignias".
- function Logos() {
- const [jsonInsignias, setInsignias] = useState([]);
- const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';
-
- useEffect(() => {
- fetch_json(url, setInsignias);
- });
-
- return (
- <View style = {{
- flex:1,
- alignItems: "center",
- justifyContent: "space-evenly",
- backgroundColor: "#efffea"}}
- >
- <Text></Text>
- <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
- <Text></Text>
- <Text></Text>
- <ScrollView>
- {jsonInsignias.map((item)=>{
- return (
- <View key ={item.id} >
- <Image style = {styles.image} source={{uri: item.imagen}} />
- <Text style={styles.description}>{item.nombre} </Text>
- <Text></Text>
- </View>
- )
- })}
- </ScrollView>
- </View>
- );
- }
-
- //función para Tienda.
- function Tienda() {
-
- return (
- <View style={{
- flex: 1,
- justifyContent: "center",
- alignItems: "center",
- backgroundColor: "#efffea"
- }}>
- <HomeScreen />
- </View>
- );
- }
-
- //función donde los clientes o personas interesadas pueden escribir un email a raices.
- function Contacto() {
- return (
- <View style = {{
- flex:1,
- alignItems: "center",
- justifyContent: "space-evenly",
- backgroundColor: "#efffea"}}>
-
- <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
- <Text style={{ fontSize: 20, color: '#2d4b09', fontWeight: '800' }}>Para solicitudes o reclamos: </Text>
- <View style={{padding:20}}>
-
- <Text style={{ fontSize: 10, color: '#4c5b4b', fontWeight: '500' }}>
- Con el próposito de poder comunicarnos de la manera más efectiva posible, favor de proveer la siguiente información: propósito de comunicación, nombre, apellido y correo electrónico. Nos estaremos comunicando con usted prontamente.
- </Text>
- <Button onPress={() => Linking.openURL('mailto:contacto@raices.com?subject=SendMail&body=Favor de incluir motivo de comunicación e información personal.') } title="Contáctanos!" color="#2d4b09" />
- </View>
- </View>
- );
-
-
- }
-
- //estilos de stylesheets
- const styles = StyleSheet.create({
- image:{
- flex:2,
- height: 150,
- resizeMode: "contain"
- },
- container: {
- flex: 1,
- backgroundColor:'#58AB63',
- paddingTop:40,
- paddingHorizontal: 20,
- },
- item: {
- marginTop:30,
- padding:10,
- backgroundColor: '#77aa5a',
- fontSize: 20,
- color: "#fff",
- justifyContent: "flex-end"
-
- },
- description: {
- padding:10,
- backgroundColor: '#77aa5a',
- fontSize: 20,
- color: "#fff",
- textAlign: "center",
- alignItems: "stretch"
-
- },
- itemLetters: {
- padding: 30,
- backgroundColor: '#77aa5a',
- fontSize: 10,
- color: "#fff",
- justifyContent: "flex-start"
- },
- itemMVV:{
- padding: 10,
- fontSize: 15,
- color: "green"},
- itemLettersMVV: {
- padding: 10,
- fontSize: 10,
- color: "#77aa5a",
- justifyContent: "flex-start"
- }
- });
-
- const Tab = createMaterialTopTabNavigator();
-
- //todas las pantalla de los tabs.
- function MyTabs() {
- const insets = useSafeAreaInsets();
- return (
- <Tab.Navigator screenOptions ={{ style: { backgroundColor: "white", marginTop: insets.top }, activeTintColor: "#228B22", labelStyle: { fontSize: 12 } }}>
- <Tab.Screen name="Sobre Nosotros"
- component={Nosotros}
- options={{ tabBarLabel: 'Sobre Nosotros' }}
- />
- <Tab.Screen name="Insignias"
- component={Logos}
- options={{ tabBarLabel: 'Insignias' }}
- />
- <Tab.Screen name="Tienda"
- component={Tienda}
- options={{ tabBarLabel: 'Tienda' }}
- />
- <Tab.Screen name="Contacto"
- component={Contacto}
- options={{ tabBarLabel: 'Contacto' }}
- />
- </Tab.Navigator>
- );
- }
-
- export default function TopTabNavigator() {
- return (
- <NavigationContainer>
- <MyTabs />
- </NavigationContainer>
- )
- }
|