私のような反応コンポーネントがあります
_const Example = () => (<View>...</View>);
_
反応ナビゲーションを使用して、私は通常、次のようにナビゲーションオプションを適用します
_Example.navigationOptions = { options };
_
TypeScriptでエラーが発生しています
[ts] Property 'navigationOptions' does not exist on type '(props: Props) => Element'.
どうすれば修正できますか?
インターフェースを書いてみた
_interface ExampleWithNavigationOptions extends Element {
navigationOptions?;
}
_
しかし、運がありません。
重要な考え方は、Example
定数に正しい型を指定することです。多分、 react-navigation
はすでにそのタイプを提供しています。ただし、次のようにビルドインReact
インターフェイスを拡張することもできます。
interface NavStatelessComponent extends React.StatelessComponent {
navigationOptions?: Object
}
const Example: NavStatelessComponent = () => {
return (
<View>
...
</View>
)
}
Example.navigationOptions = {
/*
...
*/
}
Example.propTypes = {
/*
...
*/
}
以下を使用できます。
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
すべてのコンポーネントに同じナビゲーションオプションが必要な場合は、defaultNavigationOptions
でcreateStackNavigator
を設定できることに注意してください。例が必要な場合は、 React Navigation API をご覧ください。