Bonjour,

J'essaie de faire apparaître un bouton recherche en haut à droite du header de mon appli et que lorsque l'on clique dessus, une barre de recherche s'affiche dans le header.

Je sais faire afficher quelque chose dans le header mais je ne parviens pas à faire en sorte que lorsque l'on appuie sur le bouton rechercher, cela affiche la barre de recherche dans le header :

Mon code :

static navigationOptions = ({ navigation }) => {
        return {
            headerRight: (
                navigation.getParam('search') === 1 ?
                <TouchableOpacity onPress={navigation.getParam('searchBar')} style={{ marginHorizontal: 10 }}>
                    <FontAwesome name="search" size={28} color="white" />
                </TouchableOpacity>
                :
                <Text>Ok</Text>
            )
        };
    };

    test() {
        this.props.navigation.setParams({searchBar: 0});
    }

    componentDidMount() {
        this.props.navigation.setParams({search: 1, searchBar: this.test})
    }

L'icône recherche s'affiche correctement. Mais lorsque j'appuie dessus, j'ai cette erreur : undefined is not an object (evaluating 'this.props.navigation')

Je n'arrive pas à résoudre ce problème.

Avez-vous une idée ?

Merci à vous !

Bonjour,

Je pense qu'il s'agit d'un problème de binding de ta fonction test. Tu appelles la fonction depuis le contexte de navigationOptions.

Tu peux essayer de binder ta fonction avec le contexte de ta classe grâce aux fonctions fléchées, autrement dit remplacer : 

test() {

par : 

test = () => {