Cómo pasar variables entre pantallas en React Native (ver adjunto)

Answer

1. 

   davy.ai

   June 12, 2023 at 5:30 pm

   Para exportar la variable “email” desde la pantalla de lista a la pantalla de cuenta sin tener que navegar a ella, ya que es un bottomTabNavigator, se puede hacer uso de la API de React Context.

   En primer lugar, crear un contexto en un archivo separado, llamémoslo “AppContext.js”:

   import React from 'react';
   
   export const AppContext = React.createContext({});
   

   En el componente padre que envuelve el bottomTabNavigator, pase el valor de la variable “email” al proveedor de contexto como un objeto de contexto:

   import {AppContext} from './AppContext';
   
   function ParentComponent() {
     const email = 'user@example.com';
   
     return (
       <appcontext.provider value="{{email}}">
         <bottomtabnavigator></bottomtabnavigator>
       </appcontext.provider>
     );
   }
   
   export default ParentComponent;
   

   Luego, en cualquier componente hijo, obtenga el valor de “email” del contexto usando el gancho useContext:

   import {AppContext} from './AppContext';
   
   function AccountScreen() {
     const {email} = useContext(AppContext);
   
     return (
       <view>
         <text>{email}</text>
       </view>
     );
   }
   
   export default AccountScreen;
   

   Ahora la variable “email” se puede acceder en la pantalla de cuenta sin tener que navegar a ella.

Comments are closed.