(Soy un principiante total, así que solo estoy tratando de entender reaccionar) He creado una entrada de texto y un estado de nombre de usuario/establecer nombre de usuario que quiero guardar en una pantalla de componente diferente. Por alguna razón, no puedo hacer que funcione, eliminé todos mis intentos y acabo de publicar el código actual, ¿alguien puede guiarme?
Inicio.js
const [username, setUsername] = useState("") const changeHandler = (val) => { setUsername(val)} const buttonPress = ()=> { console.log(username) navigation.navigate("Main")} return ( <SafeAreaView style={styles.container}> <Text style={styles.text}>Enter name here</Text> <View style={styles.textinputarea}> <TextInput style={styles.textinput} placeholder="Name here" maxLength = {12} onChangeText = {changeHandler} /> <TouchableOpacity onPress={buttonPress}> <Ionicons name="checkmark-circle" size={40} color="white"/> </TouchableOpacity> </View> </SafeAreaView> );}
Y aquí está la parte en Profile.js donde quiero actualizar el estado cuando el "usuario" envía su nombre en Start.js
<TouchableOpacity> <Title style={styles.text}>Hello {username}!</Title> </TouchableOpacity>Para administrar y pasar variables, puede hacer muchas cosas.
Suponiendo que está utilizando la biblioteca de navegación de reacción, lo recomendado en mi opinión es usar parámetros de navegación.
Pase el nombre de usuario a la pantalla que está navegando como tal:
navigation.navigate("Main", { username )Consíguelo y léelo en la pantalla 'Principal' como ruta (viene en accesorios o puedes usar useRoute hook)
const {username} = route.params;Más sobre parámetros en navegación: https://reactnavigation.org/docs/params/#what-should-be-in-params
Otra forma, ya mencionada por DustInCompetent, es mantener el estado en un componente, que está arriba de las pantallas (donde configuras y obtienes la variable).
Ejemplo de código:
const [username, setUsername] = useState("") return ( <View> <Component1 username={username} setUsername={setUsername} /> <Component2 username={username} setUsername={setUsername} /> </View> );Sin embargo, no recomendaría este enfoque si está utilizando una estructura de navegación (como react-navigation) ya que no pasa variables a las pantallas sin interrumpir la carga diferida, lo único que normalmente pasa es componente. En un caso, cuando desea administrar variables en múltiples pantallas y componentes, tener un contexto ayuda. Ayuda a resolver el problema de pasar variables, pero tenga en cuenta que si escala a múltiples contextos, es mejor usar Redux, Recoil u otra herramienta de administración de estado. Puede encontrar más información sobre los contextos en los documentos de React: https://reactjs.org/docs/context.html
Ejemplo de código (App.js):
return ( <YourContext> <NavigationContainer> <Stack.Navigator> <Stack.Screen ... /> <Stack.Screen ... /> </Stack.Navigator> </NavigationContainer> </YourContext> );Archivo de contexto (Context.js):
import React, { createContext, useContext, useState } from 'react'; const UsernameContext = createContext(); export const UsernameProvider = ({ children }) => { const [username, setUsername] = useState(); return ( <UsernameContext.Provider value={{ username, setUsername, }} > {children} </UsernameContext.Provider> ); }; export const useUsernameProvider = () => useContext(UsernameContext); export default UsernameContext;Luego puede importar y usar contexto en cada pantalla/componente que necesite como:
const { username, setUsername } = useUsernameProvider();Este artículo trata sobre compartir el estado entre diferentes componentes sin ninguna técnica compleja de React Context/Redux. ¡Así que es bueno para los principiantes! Breve e informativo.
Deberá tener un componente que será responsable de representar los componentes Inicio y Perfil. Digamos, un App.js o cualquier otro componente ( Layout.js ).
Muevete
const [username, setUsername] = useState("")a Layout.js / App.js, y páselo como un accesorio como
<Start username={ username } setUsername={ setUsername } />También pase valor prop al componente TextInput.
Entonces, ese estado que se actualiza con onChangeText en realidad actualiza el valor de la entrada, no solo la variable de estado, sino también el componente.
<TextInput value={ username } style={styles.textinput} placeholder="Name here" maxLength = {12} onChangeText = {changeHandler} />