Tengo una pregunta sobre reaccionar nativo. Quiero escribir un nombre de usuario en la entrada de texto aquí
function logIn({ navigation }) { const [username, setUsername] = useState(''); return ( <View style={{ backgroundColor: "white"}} > <View> <TextInput style={styles.input} placeholder='username' placeholderTextColor='white' textAlign='center' onChangeText={(val) => setUsername(val)} /> </View> <View> <Button title="Go to Home" onPress={() => navigation.navigate('Home')} /> </View> </View> ); }y luego quiero ver el nombre de usuario que escribí en esta pantalla. Por supuesto, esto no funciona porque muestra No se puede encontrar el nombre de usuario variable, ¿hay alguna forma de solucionarlo?
function HomeScreen({ navigation }) { return( <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}> <Text>Welcome {username}</Text> </View> ); }Debe estructurar su estado de manera que sea accesible para los componentes que lo necesitan. A React le gusta que tenga un estado en un componente que esté 'más arriba' en el árbol que los componentes que lo necesitan, puede consultar https://reactjs.org/docs/lifting-state-up.html para esto.
De lo contrario, podría usar la API de Context o una tienda 'global' como Redux.
Los datos de usuario registrados son un buen candidato para los gustos de Contexto o Redux, de esa manera tendrá acceso a los gustos de nombre de username en cualquier parte de la aplicación que esté dentro de su proveedor de Contexto/Redux que proporcione los datos registrados (o lo que sea). otros datos globales que pueda tener)
Puede pasar parámetros a la pantalla de Home usando la función de navigation.navigate . Navegar de esta manera:
function logIn({ navigation }) { const [username, setUsername] = useState(''); return ( <View style={{ backgroundColor: "white"}} > <View> <TextInput style={styles.input} placeholder='username' placeholderTextColor='white' textAlign='center' onChangeText={(val) => setUsername(val)} /> </View> <View> <Button title="Go to Home" onPress={() => navigation.navigate('Home', {username: username})} /> </View> </View> ); } Luego en la pantalla de HomeScreen :
function HomeScreen({ navigation, route }) { return( <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}> <Text>Welcome {route.params.username}</Text> </View> ); }