Aplicación.js
const Stack = createNativeStackNavigator(); export default function App() { return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator initialRouteName="Main"> <Stack.Screen options={{headerShown: false}} name="Main" component={MainScreen} /> <Stack.Screen options={{headerShown: false}} name="Report" component={ReportScreen} /> </Stack.Navigator> </NavigationContainer> </Provider> ); }./pantallas/ReportScreen.js
import React from 'react'; import { StyleSheet, SafeAreaView, View, Text, } from 'react-native'; import ReportReason from '../components/ReportReason'; const ReportScreen = ({route}) => { const textVal = ''; if (route.param.title.length > 12){ textVal = route.params.title.substring(0,10) + '...'; } else { textVal = route.params.title; } return( <SafeAreaView style = {reportStyles.container}> <View style = {reportStyles.card}> <Text>Report</Text> <Text>{textval}</Text> <ReportReason/> </View> </SafeAreaView> ); };parte de ./components/ReportMension.js
const ReportMension = ({mension}) => { return( TouchableOpacity style={postModalStyles.listButton} onPress={()=>{ console.log(mension) navigation.navigate('Report', { title: mension.title }); }}> <Text style={postModalStyles.text}>report</Text> </TouchableOpacity> ); }este es un componente de la pantalla llamado Principal.
console.log funciona con normalidad. ¿Por qué mi componente y mi navegador no pueden pasar parámetros (accesorios)? ¿Cómo pasar accesorios cuando se usa el navegador de pila?
Primero, en ReportMention, no puede reasignar una variable const . En su lugar, intente
let textVal = ''; if (route.params.title.length > 12) { textVal = route.params.title.substring(0,10) + '...'; } else { textVal = route.params.title; }O
const textVal = route.params.title.length > 12 ? route.params.title.substring(0,10) + '...' : route.params.title; En segundo lugar, hay un error tipográfico en la condición: route.param.title.length debe ser route.params.title.length . Esto arrojaría un error, ya que no puede acceder a la length de la propiedad en un objeto que no está definido.
Estos dos errores de sintaxis deberían evitar que funcione la actualización rápida, ya que el resultado no se compilaría. Si corrige esto y console.log el objeto de route en ReportMention, debería obtener los parámetros que está buscando.