web-dev-qa-db-ja.com

React TypeScriptを使用したネイティブ - @ React-Navigation / NativeのUserouteの使用方法

私は_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;
_
typescriptreact-nativereact-navigation
9
Christian Prado

パラメータリストを考慮してタイプを作成することもできますので、このタイプをコンポーネントにインポートし、ルート名をパラメータとして渡すだけです。

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>
}
 _
1
Eduardo Wronscki

これは複雑すぎます。 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',
      }}/>
  }/>
  );
};
 _
0
William Bell