0
139
Views¿Cómo enviar parámetros con navegación correctamente?
Estoy usando navigation.navigate para moverme entre pantallas, pero me enfrento al siguiente problema.
Llamo al método para navegar:
const FileCard = ({ fileDetails }: Props) => { const navigation = useNavigation(); const loadDetails = () => { console.log(JSON.stringify(fileDetails)); navigation.navigate("FileDetailScreen" as never, {file: fileDetails} as never) }Y me gustaría conectarme con esta pantalla:
interface Props { file: FileInfo } const FileDetailScreen = ({ file }: Props) => { return ( <View style={globalStyles.post_login_container}> <Text> { (file) ? <Text>Exists</Text> : <Text>Does not exists</Text> } </Text> </View> ) }Pero aparece "No existe" en mi pantalla, por lo que no puedo mostrar la información.
¿Como puedo solucionar este problema? ¡Gracias!
EDITAR
Llamo a la función loadDetails aquí:
<TouchableOpacity activeOpacity={0.8} onPress={() => {loadDetails(fileInfo)}} > // Elements and styles </TouchableOpacity>Y esta es mi navegación de pila:
<Stack.Navigator screenOptions={{ headerShown: false, cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid }}> <Stack.Screen name="LoginScreen" component={LoginScreen} /> <Stack.Screen name="RegisterScreen" component={RegisterScreen} /> <Stack.Screen name="ControlScreen" component={ControlScreen} /> <Stack.Screen name="ProfileScreen" component={ProfileScreen} /> <Stack.Screen name="FilesScreen" component={FilesScreen} /> <Stack.Screen name="UploadFileScreen" component={UploadFileScreen} /> <Stack.Screen name="SearchScreen" component={SearchScreen} /> <Stack.Screen name="ResultsScreen" component={ResultsScreen} /> // THE SCREEN <Stack.Screen name="FileDetailScreen" component={FileDetailScreen} /> </Stack.Navigator>1 answers
Answer question0
Está pasando los accesorios para FileDetailScreen usando los accesorios de parámetro de ruta de navegación. Si tienes una pantalla
const FileDetailScreen = ({ file }: Props) => { ... } entonces file es un accesorio del componente JSX, por ejemplo
const SomeOtherScreen = () => { return <FileDetailScreen file={someFile} /> } Esto es diferente a pasar un accesorio usando los parámetros de ruta. Si queremos navegar a FileDetailScreen y pasar el archivo prop usando
navigation.navigate("FileDetailScreen" as never, {file: fileDetails} as never)no está instanciando un nuevo componente JSX, pero está pasando parámetros de ruta . Podemos acceder a ellos de la siguiente manera.
const FileDetailScreen = ({file, route}) { const f = route.params?.file } Observe que la route es pasada por el Navigator . Siendo precisos aquí, deberíamos agregar esto a la interfaz de accesorios de su pantalla para satisfacer a TypeScript. Esto está muy bien documentado aquí .
Editar: dado que se solicitó explícitamente resolver el error de TypeScript, también vamos a resolver esto.
- Cree un tipo, por ejemplo,
RootStackParamsdonde necesitamos proporcionar los tipos para todos los parámetros de ruta.
export type RouteStackParams = { FileDetailScreen: { file: FileInfo } ... }Tenga en cuenta que debe hacer esto para todas sus rutas a fin de proporcionar los tipos correctos para el compilador de TypeScript.
- Cree su Stack.Navigator proporcionando los tipos de parámetros de ruta de la siguiente manera.
const Stack = createStackNavigator<RouteStackParams>()Su FileDetailScreen ahora está escrito correctamente. Tenga en cuenta también que esto no afecta su comportamiento en tiempo de ejecución, por lo que su código funcionaría sin hacer esto.