web-dev-qa-db-ja.com

Typescriptを使用してステートレスコンポーネントにnavigationOptionsを設定する方法

私のような反応コンポーネントがあります

_const Example = () => (<View>...</View>);
_

反応ナビゲーションを使用して、私は通常、次のようにナビゲーションオプションを適用します

_Example.navigationOptions = { options };
_

TypeScriptでエラーが発生しています

[ts] Property 'navigationOptions' does not exist on type '(props: Props) => Element'.

どうすれば修正できますか？

インターフェースを書いてみた

_interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}
_

しかし、運がありません。

reactjstypescriptreact-nativereact-navigation
13
xerotolerant

重要な考え方は、Example定数に正しい型を指定することです。多分、 react-navigationはすでにそのタイプを提供しています。ただし、次のようにビルドインReactインターフェイスを拡張することもできます。

    interface NavStatelessComponent extends React.StatelessComponent {
        navigationOptions?: Object
    }

    const Example: NavStatelessComponent = () => {
        return (
            <View>
               ...
            </View>
        )
    }

    Example.navigationOptions = {
        /*
        ...
        */
    }

    Example.propTypes = {
        /*
        ...
        */
    }
17
Bob

以下を使用できます。

import {
  NavigationScreenProps,
  NavigationScreenComponent
} from 'react-navigation'

interface Props extends NavigationScreenProps {
  // ... other props
}

const MyScreen: NavigationScreenComponent<Props> = ({ navigation }) => {
  // ... your component
}

MyScreen.navigationOptions = {
  // ... your navigation options
}

export default MyScreen
18
Sat Mandir Khalsa

すべてのコンポーネントに同じナビゲーションオプションが必要な場合は、defaultNavigationOptionsでcreateStackNavigatorを設定できることに注意してください。例が必要な場合は、 React Navigation API をご覧ください。

2
TomasVeras