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.
busqueda/guardarBusqueda
al componenteListCity
, pero también se usan enAddCity
, no se están enviando y puede que esa sea la causa del problema.busqueda/guardarBusqueda
llegan aListCity
?stack.screen
Pregunta relacionada