React js añadir elementos a un array mediante un select
const [ArregloVacunas, setArregloVacunas] = useState([]) { alert( JSON.stringify(vacunas[e.target.value].name)) setArregloVacunas(ArregloVacunas => […ArregloVacunas, vacunas[e.target.value].id + ” – ” + vacunas[e.target.value].name ]) }} > * ELEGIR VACUNAS { vacunas.map((item,index)=> {item.name} ) } {JSON.stringify(ArregloVacunas)}
React como abrir un mapa de google con el recorrido de un punto a otro
const handleClick = () => { var Destino = infoPasajero[0].Origen; var location = ‘Bello, Antioquia’ var link = `https://www.google.com/maps/dir/?api=1&origin=${location}&destination=${Destino}&travelmode=driving` window.open(link); };
React js Calcular distancia recorrida entre coordenadas
import React,{useState} from ‘react’ const tarifaBase = 3600 const costo78metros = 120 const costoPorMinuto = 220 export default function App() { //Calcular distancia recorrida en linea recta function getKilometros(lat1,lon1,lat2,lon2){ var rad = function(x) {return x*Math.PI/180;} var R = 6378.137; //Radio de la tierra en km var dLat = rad( lat2 – lat1 ); var dLong […]
React embeber google map con ruta
React select option
import { Form, Modal, Button, Card } from ‘react-bootstrap’; { setDepartamento(ciudades[e.target.value].departament.name) setCity_id(ciudades[e.target.value].id) }} > Ciudad {ciudades.map((item,index)=>( {item.name} ))}
Plantilla login
import React, { useState, useEffect } from “react”; import { SafeAreaView, View, Text, TextInput, ScrollView, TouchableOpacity, Image, Alert } from ‘react-native’; import * as Constantes from ‘../Constantes/Servidor’ import AsyncStorage from ‘@react-native-async-storage/async-storage’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; import CustomButton from ‘../components/CustomButton’; const LoginScreen = ({navigation}) => { const [email, setEmail] = useState(”); const […]
Plantilla de registro de usuario, estilizada y con validaciones
import React, {useState} from ‘react’; import { SafeAreaView, ScrollView, View, Text, TextInput, TouchableOpacity, Image, Alert } from ‘react-native’; import AsyncStorage from ‘@react-native-async-storage/async-storage’; import BouncyCheckbox from “react-native-bouncy-checkbox”; import DatePicker from ‘react-native-date-picker’; import CheckBox from ‘@react-native-community/checkbox’; import InputField from ‘../components/InputField’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; import CustomButton from ‘../components/CustomButton’; import * as Constantes from […]
Comprobar si es un correo
import * as React from ‘react’; import { View, TextInput } from ‘react-native’; export default function App() { const validate = (text) => { const reg = /^w+([.-]?w+)*@w+([.-]?w+)*(.ww+)+$/; console.log(text, reg.test(text)); }; return ( ); }
Crear componente de botón
Para importar un componente hecho por nosostros usamos import CustomButton from ‘../components/CustomButton’; Ahora creamos el componente import {Text, TouchableOpacity} from ‘react-native’; import React from ‘react’; export default function CustomButton({label, onPress}) { return ( {label} ); } Luego de importado en la vista donde lo queremos usar lo usamos de la siguiente forma. <CustomButton label={‘Registrar’} onPress={() […]
UI Login
import React, {useState} from ‘react’; import { SafeAreaView, ScrollView, View, Text, TextInput, TouchableOpacity, Image } from ‘react-native’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; const RegisterScreen = ({navigation}) => { const [email, setEmail] = useState(”); const [clave, setClave] = useState(”); return ( Login Ingresa todos los datos setEmail(text) } /> setClave(text) } /> Ya […]