Nuevo en React Native y tratando de descubrir la forma correcta de acceder a los accesorios desde otra pantalla.
La mayoría de las respuestas que encontré en línea fueron muy diferentes, por lo que me pregunto si hay una forma recomendada de hacerlo.
App.js : aquí el user son los datos del usuario actualmente conectado.
{ user ? ( <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> ) : (...) } En otras pantallas, envío al usuario a la pantalla de HomeScreen de esta manera:
navigation.navigate('Home', {user: user}) HomeScreen.js : en esta función, quiero acceder a los datos del usuario desde App.js o cualquier otra pantalla que sends el usuario.
export default function HomeScreen(props, {navigation}) {...}¿Cómo debo estructurar mi código en HomeScreen.js para recibir al usuario correctamente?
Recomiendo usar la API de contexto, la documentación al respecto se puede encontrar aquí
Aquí hay un ejemplo de uso:
Crear un proveedor para los detalles del usuario
// Import createContext from react import {createContext} from 'react' // Create a context that holds a user and a function to change the user details export const UserContext = createContext({user: null, setUser: (user) => {}}) Envuelva el navegador principal que contiene su pantalla de inicio con el proveedor de UserContext
function MainNavigator() { // For state management, useState for the user const [user, setUser] = useState(null) return ( // Pass the user and setUser inside the Provider value for consumption <UserContext.Provider value={{user, setUser}}> <YourNavigator> { /* Your screen */ } <Stack.Screen name="home" component={HomeScreen} /> </YourNavigator> </UserContext.Provider> ) } Consuma el contexto dentro de su componente HomeScreen usando un gancho simple
import { useContext } from 'react' import { UserContext } from '../where/your/provider/is' export default function HomeScreen(props) { // Consume the context! const { user, setUser } = useContext(UserContext) return <>{ /* Your screen layout */}</> }Este es solo un ejemplo simple para este caso de uso particular, sugiero aprender más sobre la API de contexto y jugar con ella.
Espero que encuentres esto útil