web-dev-qa-db-ja.com

TypescriptでReactナビゲーションnavigationOptionsパラメーターを定義する方法

Reactネイティブアプリusing React Navigationには、画面コンポーネントがあり、指定されたパラメーターに基づいてtitleプロパティを使用してnavigationOptionsを定義します。このような：

static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.myParam
});

正常に動作し、タイトルが正しく印刷されます。
ただし、アプリをTypeScriptに移行しているので、myParamを必須の文字列として定義したいのですが、パラメーターの定義方法がわからないため、IDEでオートコンプリートを取得します。

({navigation}: /* WhatDoIPutHere? */)

this Gist でアプローチを試しましたが、そこで自分自身をコメントしたので、それは私にとってうまく機能していません...

そこで期待されるパラメータを定義するために使用できる正しいタイプは何ですか？

reactjstypescriptreact-nativereact-navigation
5
MikO

実際には 要点 質問からリンクした解決策はほぼ正しいです-問題はただnavigation.state.params定義によると未定義の可能性があります！だから、TypeScriptと私のIDE（賢い人）はそれについて不平を言っていました...

あなたは定義から関連するビットを見ることができます ここ ：

export interface NavigationLeafRoute<Params> {
  // ...
  /**
   * Params passed to this route when navigating to it,
   * e.g. `{ car_id: 123 }` in a route that displays a car.
   */
  params?: Params;
}

だから私は自分のコンポーネントでこれを行うことになりました：

interface Params {
    myParam: string
}

// ...

static navigationOptions = ({navigation}: NavigationScreenProps<Params>) => ({
    title: navigation.state.params ? navigation.state.params.myParam : 'Default title'
});

そして、私のIDE-TypeScriptが大好きになり始めたので、オートコンプリートを含めて、うまく機能します！

6
MikO

次の手順を実行することで、これを機能させることができました。

import { NavigationScreenProp, NavigationRoute } from 'react-navigation';

interface Params {
  otherId: string;
  otherName: string;
  otherPic: string;
  id: string;
}

class MessengerContainer extends Component {
  static navigationOptions = ({ navigation }: { navigation: NavigationScreenProp<NavigationRoute<Params>, Params>}) => ({

// ... more code here

});
0
Cory McAboy