0
302
VistasCómo pasar datos entre dos componentes, React Native
Soy un principiante en React Native. Estoy tratando de pasar datos entre dos componentes en mi aplicación. Tengo componentes: Home.js y MyModal.js.
En el primer componente, Home.js, tengo una matriz con algunos datos y el componente FlatList. Home.js muestra los datos en mi aplicación correctamente. Además, en home.js, intento mostrar Modal, cuando el usuario hace clic en una Tarjeta en el componente TouchableOpacity:
<TouchableOpacity onPress={() => <MyModal />}> <Card></Card> </TouchableOpacity>En el segundo componente, MyModal.js, intento mostrar los datos /item.title/ y /item.body/ de home.js.
Aquí está todo el código:
casa.js:
import React, { useState } from "react"; import {StyleSheet,View,Text,FlatList,TouchableOpacity} from "react-native"; import Card from "../components/card"; import MyModal from "../components/myModal" function Home({ navigation }) { const [reviews, setReviews] = useState([ { body: "lorem ipsum", key: " 1", title: "Flower", }, { key: "2", title: "Two flowers", body: "lorem ipsum", } ]); return ( <View style={styles.container}> <FlatList data={reviews} renderItem={({ item }) => ( <TouchableOpacity onPress={() => <MyModal />}> <Card> <Text>{item.title}</Text> <Text>{item.body}</Text> </Card> </TouchableOpacity> )} /> </View> ); }miModal.js
import React from "react"; import { View, Text, Button, StyleSheet } from "react-native"; import Card from "../components/card"; export default function MyModal({ route, navigation }) { return ( <View> <Card> <Text>{data.title}</Text> <Text>{data.body}</Text> </Card> </View> ); }Aquí hay un ejemplo de lo que quiero mostrar:
Home.js antes de hacer clic: 
Pantalla después de hacer clic (abrió MyModal.js con datos de home.js): 
Aquí está la caja de códigos: https://codesandbox.io/s/youthful-fermat-lui4g
estare agradecido por cualquier consejo
3 Respuestas
Responde la pregunta0
Hear es la forma en que puede pasar datos a otro componente siguiendo Way
Primero, define la página raíz de NavigationContainer de la aplicación como se muestra a continuación
<NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen options={{ headerShown: false }} name="Home" component= {HomeScreen} /> <Stack.Screen name="Gallery" component={GalleryScreen} /> <Stack.Screen name="Settings" component={SettingsScreen} /> <Stack.Screen name="GalleryDetails" component={GalleryDetailsScreen} /> </Stack.Navigator>Clase en la que usó Navegación Galería de mi código
const gallery = () => { const navigation = useNavigation(); } navigation.navigate('GalleryDetails', { imageURI(Key): item.node.image.uri(Value)});Escuche los detalles de la galería. Obtengo los datos de la siguiente manera.
var imageURI = route.params.imageURI; console.log(imageURI);0
<View style={styles.container}> <FlatList data={reviews} renderItem={({ item }) => ( <TouchableOpacity onPress=props.navigation.push('nameOfRouteModal', itemToPast)> <Card> <Text>{item.title}</Text> <Text>{item.body}</Text> </Card> </TouchableOpacity> )} /> </View> ); } export default function MyModal({ route, navigation }) { const routeParams = route.params; return ( <View> <Card> <Text>{routeParams.title}</Text> <Text>{routeParams.body}</Text> </Card> </View> ); }0
Solo hazlo así:
function Home({ navigation }) { // take a state by default null when a record is clicked it will be updated. and //pass it to the Modal like below const [currentReview , setCurrentView] = useState(null) const [reviews, setReviews] = useState([ { body: "lorem ipsum", key: " 1", title: "Flower", }, { key: "2", title: "Two flowers", body: "lorem ipsum", } ]); return ( <View style={styles.container}> <FlatList data={reviews} renderItem={({ item }) => ( <TouchableOpacity onPress={() => {setCuurentReview(item); <MyModal currentReview={currenReview} />}> <Card> <Text>{item.title}</Text> <Text>{item.body}</Text> </Card> </TouchableOpacity> )} /> </View> ); }entonces atrápalo así:
export default function MyModal({ route, navigation, currentReview }) { return ( <View> <Card> <Text>{data.title}</Text> <Text>{data.body}</Text> </Card> </View> ); }