如何正确发送带有导航的参数？

Question

我正在使用 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>

Answer 1

您正在使用导航路线参数道具传递 FileDetailScreen 的道具。如果你有屏幕

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

...

}

那么file就是JSX组件的prop，例如

const SomeOtherScreen = () => {

    return <FileDetailScreen file={someFile} />
}

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

传递文件属性

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

你不是在实例化一个新的 JSX 组件，而是在传递 route params。我们可以按如下方式访问它们。

const FileDetailScreen = ({file, route}) {

 const f = route.params?.file
}

请注意 route 由 Navigator 传递。准确地说，我们应该将其添加到屏幕的道具界面中以满足 TypeScript 的要求。这个很好documented here.

编辑：既然明确要求解决TypeScript错误，我们也打算解决这个问题。

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


export type RouteStackParams = {

    FileDetailScreen: { 
        file: FileInfo
    }

    ...
}

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

通过提供如下路由参数类型来创建您的 Stack.Navigator。

const Stack = createStackNavigator<RouteStackParams>()

您的 FileDetailScreen 现已正确键入。另请注意，这不会影响您的运行时行为，因此您的代码无需执行此操作即可运行。

如何正确发送带有导航的参数？

How to send params with navigation correctly?

javascript

navigation

typescript

reactjs

react-native