javascript - Hur skickar man parametrar korrekt med navigering?

Jag använder navigation.navigate för att navigera mellan skärmar, men jag stöter på följande problem.

Jag anropar metoden för att navigera:

const FileCard = ({ fileDetails }: Props) => {
  
  const navigation = useNavigation();

  const loadDetails = () => {
    console.log(JSON.stringify(fileDetails));
    navigation.navigate("FileDetailScreen" as never, {file: 
    fileDetails} as never)
  }

Och jag skulle vilja ansluta till den här skärmen:

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>
  )
}

Men jag får "Finns inte" på min skärm, så jag kan inte visa informationen.

Hur kan jag åtgärda detta problem? Tack!

REDIGERA

Jag anropar loadDetails-funktionen här:

    <TouchableOpacity
      activeOpacity={0.8}
      onPress={() => {loadDetails(fileInfo)}}
    >

    // Elements and styles

    </TouchableOpacity>

Och detta är min stacknavigering:

    <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>

Svar #1

Du skickar props för FileDetailScreen med hjälp av navigeringsruttparametrarna. Om du har en skärm

const FileDetailScreen = ({ file }: Props) => {

...

} 

då är file en prop av JSX-komponenten, t.ex.

const SomeOtherScreen = () => {

    return <FileDetailScreen file={someFile} />
}

Detta är annorlunda än att skicka en prop med hjälp av route-parametrarna. Om vi vill navigera till FileDetailScreen och skicka fil-propen med hjälp av

navigation.navigate("FileDetailScreen" as never, {file: fileDetails} as never)

du instansierar inte en ny JSX-komponent, men du skickar routparametrar. Vi kan komma åt dem på följande sätt.

const FileDetailScreen = ({file, route}) {

 const f = route.params?.file
}

Observera att route skickas av Navigator. För att vara exakt här bör vi lägga till detta i props-gränssnittet för din skärm för att tillfredsställa TypeScript. Detta är mycket väl dokumenterat här.

Redigera: Eftersom det uttryckligen begärdes att lösa TypeScript-felet, kommer vi också att lösa detta.

1. Skapa en typ, t.ex. RootStackParams där vi behöver ange typerna för alla ruttparametrar.

export type RouteStackParams = {

    FileDetailScreen: { 
        file: FileInfo
    }

    ...
}

Observera att du behöver göra detta för alla dina rutter för att ge korrekta typer för TypeScript-kompilatorn.

2. Skapa din Stack.Navigator genom att ange typerna för ruteparametrarna enligt följande.

const Stack = createStackNavigator<RouteStackParams>()

Din FileDetailScreen är nu korrekt typad. Observera också att detta inte påverkar ditt körningsbeteende, så din kod skulle fungera utan att göra detta.