我習慣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>
uj5u.com熱心網友回復：
您正在傳遞FileDetailScreen使用導航路線引數道具的道具。如果你有螢屏
const FileDetailScreen = ({ file }: Props) => {
...
}
thenfile是 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。這在此處有很好的記錄。
編輯：由于明確要求解決 TypeScript 錯誤，我們也將解決這個問題。
- 創建一個型別，例如
RootStackParams我們需要為所有路由引數提供型別的地方。
export type RouteStackParams = {
FileDetailScreen: {
file: FileInfo
}
...
}
請注意，您需要為所有路由執行此操作，以便為 TypeScript 編譯器提供正確的型別。
- 通過提供如下的路由引數型別來創建您的 Stack.Navigator。
const Stack = createStackNavigator<RouteStackParams>()
您的 FileDetailScreen 現在已正確鍵入。還要注意，這不會影響您的運行時行為，因此您的代碼可以在不這樣做的情況下作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/433653.html
標籤：javascript 反应 打字稿 反应式 导航
上一篇：TS我如何將此函式寫入箭頭函式？
下一篇：在expo中洗掉對web的支持