私は_route.params
_からのオブジェクトを取得しようとしていますが、TypeScriptを認識させる方法はわかりません。
これは、my 詳細ページ渡しインシデントパラメータに移動する機能です。
_const navigateToDetail = (incident: IncidentProps): void => {
navigation.navigate('Detail', { incident });
};
_
そしてここでは私がroute.paramsからこのオブジェクトを取得しようとしている詳細ページコードの一部です:
_type IncidentRouteParams = {
incident: IncidentProps;
}
const Detail: React.FC = () => {
const navigation = useNavigation();
const route = useRoute();
const incident = route.params.incident;
_
私はこの scentRouteParams Typeを渡す必要があると思います const = useroute()
前もって感謝します。
これがエラーのあるイメージです。
編集:
私はこのようにしました、そしてそれはうまくいったが、それが正しい方法であるかどうかわからない:
_ const route = useRoute<RouteProp<Record<string, IncidentRouteParams>, string>>();
const incident = route.params.incident;
_
パラメータリストを考慮してタイプを作成することもできますので、このタイプをコンポーネントにインポートし、ルート名をパラメータとして渡すだけです。
import { RouteProp } from '@react-navigation/native';
export type RootStackParamList = {
Home: undefined;
Feed: { sort: 'latest' | 'top' };
};
export type RootRouteProps<RouteName extends keyof RootStackParamList> = RouteProp<
RootStackParamList,
RouteName
>;
_
使用法:
export const Feed = () => {
const route = useRoute<RootRouteProps<'Feed'>>();
return <Text>{route.params.sort}</Text>
}
_
これは複雑すぎます。 TSにInitialParamsを設定するための簡単な方法があります。
設定:
type StackParamList = {
TheSource: { endpoint: string; type: string;};
BenefitDetail: React.FC;
ItineraryMain: {reFetch: boolean;};
Today: React.FC;
};
const Stack = createStackNavigator<StackParamList>();
_
それを使用するとき:
const TheSourceRoute = (): React.ReactElement => {
return (<StackNavigator id="TheSource" element={
<Stack.Screen name="TheSource" component={WebviewModal} initialParams={{ endpoint: sourceUrl, type: 'directsource' }}
options={{
title: 'The Source',
}}/>
}/>
);
};
_