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 คือ prop ของคอมโพเนนต์ JSX เช่น

const SomeOtherScreen = () => {

    return <FileDetailScreen file={someFile} />
}

นี่แตกต่างจากการส่ง prop โดยใช้พารามิเตอร์ของ route ถ้าเราต้องการไปยัง FileDetailScreen และส่ง 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>()

หน้าจอรายละเอียดไฟล์ของคุณตอนนี้ถูกกำหนดประเภทอย่างถูกต้องแล้ว สังเกตด้วยว่านี่ไม่ได้ส่งผลต่อพฤติกรรมการทำงานของคุณ ดังนั้นโค้ดของคุณจะทำงานได้โดยไม่ต้องทำสิ่งนี้