web-dev-qa-db-ja.com

typescriptでreact-navigationのwithNavigationを使用する方法

私は、react-native、react-navigation、およびTypeScriptを一緒に使用してアプリを作成しようとしています。次のように、画面は2つ（HomeScreenおよびConfigScreen）と1つのコンポーネント（GoToConfigButton）のみです。

ホーム画面

import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";

export class HomeScreen extends React.Component<NavigationScreenProps> {
  render() {
    return (
      <View>
        <Text>Click the following button to go to the config tab.</Text>
        <GoToConfigButton/>
      </View>
    )
  }
}

GoToConfigButton

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<NavigationInjectedProps> {
  render() {
    return <Button onPress={this.handlePress} title="Go" />;
  }
  private handlePress = () => {
    this.props.navigation.navigate("Config");
  };
}
export default withNavigation(GoToConfigButton);

ConfigScreenのコードはここでは重要ではないため、ここでは示しません。さて、実際に上記のコードは機能します。ボタンをクリックして構成画面に移動できます。 TypeScriptでは、navigationプロパティをGoToConfigButtonに手動で指定する必要があると問題があります。

<View>
  <Text>Click the following button to go to the config tab.</Text>
  <GoToConfigButton/>  <-- Property "navigation" is missing.
</View>

TypeScriptに、navigationプロパティがreact-navigationによって自動的に与えられることをどのように伝えることができますか？

reactjstypescriptreact-nativereact-navigation
9
Searene

この問題が修正された pull request で説明されているように、NavigationInjectedPropsをラップするPartial <>インターフェイスがありませんでした。

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
    render() {
        return <Button onPress={this.handlePress} title="Go" />;
    }

    private handlePress = () => {
        this.props.navigation.navigate("Config");
    };
}

export default withNavigation(GoToConfigButton);

@ types/react-navigation> = 2.13. でテスト

4
Niko Kovačič
import styles from "./styles";

import React, { PureComponent } from "react";

import { Button } from "react-native-elements";
import {
  DrawerItems,
  NavigationInjectedProps,
  SafeAreaView,
  withNavigation
} from "react-navigation";

class BurgerMenu extends PureComponent<NavigationInjectedProps> {
  render() {
    return (
      <SafeAreaView style={styles.container} >

        <Button
          icon={{ name: "md-log-out", type: "ionicon" }}
          title={loginStrings.logOut}
          iconContainerStyle={styles.icon}
          buttonStyle={styles.button}
          titleStyle={styles.title}
          onPress={() => this.props.navigation.navigate("LoginScreen")}
        />
      </SafeAreaView>
    );
  }
}

export default withNavigation(BurgerMenu);
1
laogui