1

estoy desarrollando una app sobre el clima.

Tengo el siguiente codigo en la App.js

import React, {useState} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

import ListCity from './App/screens/listCity/ListCity';
import City from './App/screens/city/City';
import AddCity from './App/screens/addCity/AddCity';

const Stack = createNativeStackNavigator();

export default function App() {

  const [busqueda, guardarBusqueda] = useState({
    ciudad: '',
    pais: '',
  });

  return (
  <GestureHandlerRootView style={{flex: 1}}>
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Mis Ciudades" component={ListCity} busqueda={busqueda} guardarBusqueda={guardarBusqueda}/>
        <Stack.Screen name="Agregar Ciudad" component={AddCity} />
        <Stack.Screen name="Mi Ciudad" component={City} />
      </Stack.Navigator>
    </NavigationContainer>
  </GestureHandlerRootView>
  );    
};

y la otra screen es AddCity, en la cual se busca la ciudad para consultar el clima:

import React, {useState} from 'react';
import {TextInput, Alert, Animated, Text, View, StyleSheet, TouchableWithoutFeedback} from 'react-native';
import { Picker } from '@react-native-picker/picker';

const AddCity = ({busqueda, guardarBusqueda}) => {

    const {pais, ciudad} = busqueda;

    const [animacionboton] = useState(new Animated.Value(1));

    const consultarClima = () => {
        if(ciudad.trim() === '' || pais.trim() === '') {
            mostrarAlerta();
            return;
        }
    }

    const mostrarAlerta = () => {
        Alert.alert(
            'Error',
            'Agrega una ciudad y pais',
            [{text: 'Entendido'}]
        )
    }

    const animacionEntrada = () => {
        Animated.spring(animacionboton, {
            toValue: .7,
            useNativeDriver: true
        }).start();
    }

    const animacionSalida = () => {
        Animated.spring(animacionboton, {
            toValue: 1,
            friction: 4,
            tension: 30,
            useNativeDriver: true
        }).start();
    }

    const estiloAnimacion = {
        transform: [{scale: animacionboton }]
    }

    return (
        <View style={styles.formulario}>
            <View style={styles.contenido}>
            <View style={styles.contenido}>
                <Picker
                    selectedValue={pais}
                    onValueChange= {pais => guardarBusqueda({...busqueda, pais})}
                    itemStyle={{height: 120, backgroundColor: '#FFF'}}
                >
                    <Picker.Item label="-- Seleccione un país --" value="" />
                    <Picker.Item label="Argentina" value="AR" />
                </Picker>
            </View>

                <TextInput 
                    onChangeText={ciudad => guardarBusqueda({...busqueda, ciudad})}
                    value={ciudad}
                    style={styles.input}
                    placeholder="Ciudad"
                    placeholderTextColor="#666"
                />
            
                <TouchableWithoutFeedback
                    onPressIn={() => animacionEntrada()}
                    onPressOut={() => animacionSalida()}
                    onPress={() => consultarClima()}
                >
                    <Animated.View style={[styles.btnBuscar, estiloAnimacion]}>
                        <Text style={styles.textoBuscar}>Buscar Clima</Text>
                    </Animated.View>
                </TouchableWithoutFeedback>
            </View>
        </View>
    );
};

export default AddCity;

Me salta el error que busqueda.pais is undefined, creo que el problema esta en:

<Stack.Screen name="Mis Ciudades" component={ListCity} busqueda={busqueda} guardarBusqueda={guardarBusqueda}/>

como puedo solucionarlo??

creo que el problema esta en la sintaxis

muchas gracias

Parece que tu publicación es mayormente código; por favor, añade más detalles.

Es muy molesto, porque a veces se explica el problema en detalle. Sin embargo, el código proporcionado es más grande que la explicación y aparece este mensaje. Es un mensaje que no deja hacer la pregunta o la modificación del código del OP.

5
  • Parece que se estan pasando props busqueda/guardarBusqueda al componente ListCity, pero también se usan en AddCity, no se están enviando y puede que esa sea la causa del problema.
    – g.4
    Commented el 8 nov. 2021 a las 16:41
  • detecté ese error y lo cambié pero igualmente me sigue tirando el error busqueda.pais is undefined
    – Lucys_asd
    Commented el 8 nov. 2021 a las 16:43
  • ¿Las props busqueda/guardarBusqueda llegan a ListCity?
    – g.4
    Commented el 8 nov. 2021 a las 16:46
  • No, no llegan allií. Modifiqué esa parte y ahora quedó asi: <Stack.Screen name="Mis Ciudades" component={ListCity} /> <Stack.Screen name="Agregar Ciudad" component={AddCity} busqueda={busqueda} guardarBusqueda={guardarBusqueda}/> <Stack.Screen name="Mi Ciudad" component={City} />
    – Lucys_asd
    Commented el 8 nov. 2021 a las 16:47
  • No se pueden mandar props de esa forma, aquí hay varios ejemplos de como enviar props en stack.screen Pregunta relacionada
    – g.4
    Commented el 8 nov. 2021 a las 17:00

1 respuesta 1

0

Según la documentación de React-Navigation para Stack.Screen es posible pasar los props al componente hijo de la siguiente manera:

<Stack.Screen name="Mis Ciudades">
    {(props) => <ListCity busqueda={busqueda} guardarBusqueda={guardarBusqueda}/>}
</Stack.Screen>

Sin embargo tiene sus desventajas; de la documentación (traducida):

Nota: De forma predeterminada, React Navigation aplica optimizaciones a los componentes de la pantalla para evitar renderizaciones innecesarias. El uso de una función de renderizado elimina esas optimizaciones. Entonces, si usa una función de renderizado, deberá asegurarse de usar React.memo o React.PureComponent para los componentes de su pantalla para evitar problemas de rendimiento.

Es por esto que se recomienda el uso de React.Context para transmitir datos a los componentes.

La implementación sería algo como:

import React, {useState, createContext} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

import ListCity from './App/screens/listCity/ListCity';
import City from './App/screens/city/City';
import AddCity from './App/screens/addCity/AddCity';

const Stack = createNativeStackNavigator();
// Se crea el contexto para manejar las búsquedas
export const BusquedaContext = createContext()

export default function App() {

  const [busqueda, guardarBusqueda] = useState({
    ciudad: '',
    pais: '',
  });
  // Añadimos el Provider guardando las variables del 'useState'
  return (
  <BusquedaContext.Provider value={{busqueda, guardarBusqueda}}>
    <GestureHandlerRootView style={{flex: 1}}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Mis Ciudades" component={ListCity}/>
          <Stack.Screen name="Agregar Ciudad" component={AddCity} />
          <Stack.Screen name="Mi Ciudad" component={City} />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  </BusquedaContext.Provider>
  );    
};

Y luego en tus componentes consigues los valores con useContext:

import React, {useState, useContext} from 'react';
import {TextInput, Alert, Animated, Text, View, StyleSheet, TouchableWithoutFeedback} from 'react-native';
import { Picker } from '@react-native-picker/picker';
// Se importa el contexto desde el archivo App.js
import {BusquedaContext} from '../../../../App.js'
const AddCity = (props) => {
    // Conseguimos los valores desde el contexto
    const {busqueda, guardarBusqueda} = useContext(BusquedaContext)

    const {pais, ciudad} = busqueda;
    
    // ...
}
export default AddCity

la sentencia export const BusquedaContext = createContext() no tiene que estar obligatoriamente en App.js y las buenas prácticas dicen que tienen que tener su propio archivo. Lo importante es que tanto el argumento del useContext y el renderizado del Provider deben venir de la misma instancia creada por createContext().

1
  • Mil gracias, tu explicación es muy clara. Saludos!
    – Lucys_asd
    Commented el 8 nov. 2021 a las 21:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.