Vuelvo a hacer una pregunta sobre ReactNative: tengo el siguiente App.js:
export default function App() { function Tabs() { return <TabBar />; } const styles = StyleSheet.create({ backButton: { color: global.GUI.ORANGE, }, }); return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Tabs" component={Tabs} .. /> <Stack.Screen name="Impostazioni" component={Settings} ... /> <Stack.Screen name="Registrati" component={Signup} ... /> <Stack.Screen name="Login" component={Login} ... /> </Stack.Navigator> </NavigationContainer> ); }Quiero pasar a cada componente algunos valores declarados en App.js, pero haciendo algo como:
<Stack.Screen name="Impostazioni" component={Settings} currentUser={"name":"test"} />Devolver indefinido en:
import React from 'react'; import {View,Text} from 'react-native'; const Settings = (props) => { --> console.log(props.currentUser) // here is undefined return ( <View > <Text>This is Settings!</Text> </View> ); }; export default SettingsEntonces, ¿cómo puedo pasar correctamente accesorios a App.js a todos los demás componentes?
Gracias
Debe usar React Context (recomendado) o pasar accesorios a su componente.
https://wix.github.io/react-native-navigation/docs/third-party-react-context/
De otra manera:
<Stack.Navigator initialRouteName="LoginScreen" headerMode="none"> <Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} /> <Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} /> </Stack.Navigator>Puede recibir parámetros iniciales en login.js
console.log(this.props.route.params.key)Otro enfoque:
Pasar accesorios al componente - Enlace de documentación: (verifique su versión de navegación) https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props