web-dev-qa-db-fra.com

Comment définir les options de navigation sur le composant sans état avec Typescript

J'ai un composant réactif comme

const Example = () => (<View>...</View>);

En utilisant react-navigation, j'appliquerais normalement les options de navigation en disant

Example.navigationOptions = { options };

Avec TypeScript, je reçois l'erreur

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

Comment puis-je réparer cela?

J'ai essayé d'écrire une interface

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

Mais sans chance.

reactjstypescriptreact-nativereact-navigation
13
xerotolerant

L'idée clé est de spécifier le type correct pour la constante Example. Probablement, react-navigation fournit déjà ce type. Mais, vous pouvez également étendre le smth d'interface React intégré comme ceci:

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

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

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

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

Vous pouvez utiliser les éléments suivants:

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

Si le cas est que vous souhaitez la même option de navigation pour tous vos composants, n'oubliez pas que vous pouvez définir le defaultNavigationOptions dans le createStackNavigator. Voici React Navigation API si vous avez besoin d'un exemple.

2
TomasVeras