反応ナビゲーションの小道具に強いタイピングを追加

Question

私は反応ネイティブプロジェクト（expo）でtypescriptを使用しています。

このプロジェクトでは反応ナビゲーションが使用されていますので、私の画面ではnavigationOptionsと設定でき、navigationの小道具にアクセスできます。

これを強く入力しようとしていますので、どのプロパティを設定できるかのヒントを得ています。

interface NavStateParams { 
    someValue: string 
} 

interface Props extends NavigationScreenProps<NavStateParams> { 
    color: string 
} 

class Screen extends React.Component<Props, any> { 
    // This works fine 
    static navigationOptions: NavigationStackScreenOptions = { 
     title: 'ScreenTitle' 
    } 
    // Does not work 
    static navigationOptions: NavigationStackScreenOptions = ({navigation, screenProps }) => ({ 
     title: navigation.state.params.someValue 
    }) 
} 

コンポーネントの小道具として反応ナビゲーションを処理する最良の方法は何でしょうか。

Answer 1

私は同じ問題を持っており、ここに私のソリューションです：

import * as React from 'react' 
import { NavigationScreenProps, NavigationStackScreenOptions } from 'react-navigation' 

interface NavStateParams { 
    someValue: string 
} 

// tslint:disable-next-line:no-any 
type NavigationOptionsFn<TParams=any> = (props: NavigationScreenProps<TParams>) => NavigationStackScreenOptions 

class Screen extends React.Component { 
    // This should works fine 
    static navigationOptions: NavigationOptionsFn<NavStateParams> = ({ navigation, screenProps }) => ({ 
    title: navigation.state.params.someValue 
    }) 
} 

あなたはそれが世界的に動作させるためにいくつかのd.tsファイルにNavigationOptionsFn<TParams>型を宣言することもできます。

Answer 2

ただ、このように、あなたの小道具にNavigationTypeを追加します。

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

    export interface HomeScreenProps { 
     navigation: NavigationScreenProp<any,any> 
    }; 

    export class HomeScreen extends React.Component<HomeScreenProps, object> { 

     render() { 
     return (
      <View style={styles.container}>  
      <Button 
       title="Go to Details" 
       onPress={() => this.props.navigation.navigate('Details')} 
      /> 
      </View> 
     ); 
     } 
    }