navigation.navigate - это не функция

Я использую навигацию для навигации по моему собственному приложению React, и мне не удалось оплатить эту проблему. Я сделал как документы, но у меня ничего не работает.

Проблема в том, что я пытаюсь использовать опцию навигации, чтобы добавить заголовок и правую кнопку, чтобы перейти на другой экран, но она продолжает давать мне эту ошибку: «navigation.navigate не является функцией. (В navigation.navigate не определено )

Вот мой код:

    static navigationOptions = (navigation) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

Спасибо


react-native react-navigation-stack
person Ahmad Alsehaim    schedule 20.10.2018    source источник
comment
Поместите код в свой вопрос и преобразуйте его в автономный пример, чтобы люди могли ссылаться на этот вопрос в будущем.   -  person Melle    schedule 20.10.2018

Ответы (2)


arrow_upward
17
arrow_downward

Это обычная проблема с React, особенно если вы не понимаете новейший стандарт JS (например, ES6, который используется React).

Итак, ваша проблема здесь концептуальная. Компоненты React получают один объект с именем props, который содержит все файлы props. Обычно вы используете форму деконструкции, чтобы напрямую получить некоторые атрибуты props. В этом случае вы хотите иметь props.navigation.

Вы можете деконструировать объект props в аргументах стрелочной функции, это то, что говорится в документации, с ({navigation}) => ... вместо (navigation) => ...

Это то же самое, что использовать (props) => ..., а затем props.navigation

Вам также нужно будет изменить функцию onPress. Использование блока {...} в стрелочной функции ничего не вернет, если вы не укажете return. Если вы не оборачиваете функцию тела с помощью {...}, то это то же самое, что писать { return ...}. Итак, если вы хотите вернуть navigation.navigate('settings'), вам нужно удалить окружающий {...} или написать return внутри.

    static navigationOptions = ({navigation}) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=> navigation.navigate('settings')}>Settings</Title>)
        };
    };

Кроме того, вы можете сделать то же самое с функцией navigationOptions:

    static navigationOptions = ({navigation}) => ({
        title: 'Review Jobs',
        headerRight: (<Title onPress={() => navigation.navigate('settings')}> Settings </Title>),
    });
person javrd    schedule 20.10.2018
comment
Мне нужна помощь. Обратите внимание на эту проблему - stackoverflow.com/questions/61799976/ - person Forhad; 14.05.2020

arrow_upward
3
arrow_downward

использовать деструктуризацию объекта при получении параметров как:

static navigationOptions = ({navigation}) => { // use {} to object destructuring
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };
person Ravi Singh    schedule 01.10.2019
comment
Мне нужна помощь. Обратите внимание на эту проблему - stackoverflow.com/questions/61799976/ - person Forhad; 14.05.2020
comment
Спасибо, чувак, это сработало .. - person Suyash Vashishtha; 16.03.2021