javascript - 如何正确地通过导航发送参数？

我正在使用 navigation.navigate 在屏幕之间移动，但我遇到了以下问题。

我调用方法进行导航：

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

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

我想连接这个屏幕：

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

但我在屏幕上看到“不存在”，所以我无法显示信息。

我该如何解决这个问题？谢谢！

编辑

我在这里调用 loadDetails 函数：

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

    // Elements and styles

    </TouchableOpacity>

这是我的堆栈导航：

    <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

你正在使用导航路由参数 props 传递 FileDetailScreen 的 props。如果你有一个屏幕

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

...

} 

那么 file 是 JSX 组件的一个属性，例如。

const SomeOtherScreen = () => {

    return <FileDetailScreen file={someFile} />
}

这与使用路由参数传递 prop 不同。如果我们想导航到 FileDetailScreen 并使用传递 file prop

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

你不是在实例化一个新的 JSX 组件，而是在传递路由参数。我们可以如下访问它们。

const FileDetailScreen = ({file, route}) {

 const f = route.params?.file
}

注意 route 是由 Navigator 传递的。准确地说，我们应该将其添加到你的屏幕的 props 接口中以满足 TypeScript 的要求。这在这里有很好的文档说明。

编辑：由于明确要求解决 TypeScript 错误，我们也将解决这个问题。

1. 创建一个类型，例如 RootStackParams，我们需要为所有路由参数提供类型。

export type RouteStackParams = {

    FileDetailScreen: { 
        file: FileInfo
    }

    ...
}

请注意，您需要对所有路由都执行此操作，以便为 TypeScript 编译器提供正确的类型。

2. 通过提供路由参数类型来创建你的 Stack.Navigator，方法如下。

const Stack = createStackNavigator<RouteStackParams>()

您的 FileDetailScreen 现在已正确类型化。还请注意，这不会影响您的运行时行为，因此即使不这样做，您的代码也能正常工作。