Блог

Главная - Вопросы по программированию - Не удается перейти к другому компоненту -> ошибка: не удается прочитать свойство ‘navigate’ неопределенного

Не удается перейти к другому компоненту -> ошибка: не удается прочитать свойство ‘navigate’ неопределенного

#javascript #react-native #react-navigation

#javascript #реагировать-родной #реакция-навигация

Вопрос:

В моем react native приложении у меня есть header , и оно состоит из:

 
export default class foto extends Component {
.
.
.
.
static navigationOptions = {
        headerTitle: <Titulo/>,
        headerTitleStyle: {
            color: 'white',
        },
        headerRight: <MenuIcon/>,
        headerLeft: <HomeIcon/>,
        headerStyle: {
            backgroundColor: '#d87c3a'
        }
};

}

И я хочу, чтобы, когда я нажимаю headerRight , чтобы перейти к компоненту, проблема в том, что при попытке я получаю сообщение об ошибке: Cannot read property 'navigate' of undefined

Находится за <MenuIcon/> пределами default class foto , но в том же файле

Код меню:

 class MenuIcon extends React.Component{
    render(){
        return(
            <TouchableOpacity style={{marginRight:10}}>
                <Icon name={'md-menu'} size={26} color='white'
                onPress={() => this.props.navigation.navigate('menu')}/>
            </TouchableOpacity>
        )
    }
}

Мой StackNavigator на App.js :

 const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});




export default createAppContainer(AppNavigator);

Мой импорт:

 import React, { Component } from 'react'
import { Text, View, ImageBackground, Image, TextInput, TouchableOpacity, TouchableHighlight, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';

Как я могу решить свою проблему?

Комментарии:

1. не профессионал с reactr, но видеть «это» в любом виде javascript никогда не является хорошей идеей ОО

2. @jonathanHeindl Я просто делаю так, как указано в документации по ссылке

3. каковы ваши импортные данные?

4. Я уже добавил к своему вопросу

5. единственное отличие, которое я заметил, это то, что в примере вокруг него есть элемент view, возможно, это важно

Ответ №1:

Вам нужно передать навигацию вашему <MenuIcon/> , чтобы ваша навигация была примерно следующей:

 const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto,
    navigationOptions: ({ navigation }) => ({
    headerTitle: <Titulo/>,
    headerTitleStyle: {
        color: 'white',
    },
    headerRight: <MenuIcon navigation={navigation}/>,
    headerLeft: <HomeIcon/>,
    headerStyle: {
        backgroundColor: '#d87c3a'
    }
     })
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});


export default createAppContainer(AppNavigator);

Это должно позволить вам перемещаться из компонента MenuIcon
Обратите внимание, что вам не нужны параметры навигации в классе Foto, и не забудьте импортировать как MenuIcon, так и HomeIcon на страницу stack navigator

Надеюсь, это решит вашу проблему.

Комментарии:

1. Спасибо! Это решило мою проблему. И последний вопрос: для всех моих экранов с заголовком я должен действовать, как в этом?

2. Конечно, вы можете следовать этому подходу

Метки: