React Native: React-Navigation Не удается прочитать свойство 'перейти' из undefined

В настоящее время я изучаю React Native, и у меня возникли проблемы с React-навигацией. Я пытаюсь переключить экран при нажатии "кнопки". В «кнопке» у меня есть:

onPress = {() => navigate('Home')}

У меня const { navigate } = this.props.navigation; перед оператором возврата.

Когда я запускаю его, я получаю сообщение «Невозможно прочитать свойство« перейти »для неопределенного значения. Думаю, мне нужно где-то разместить this.props.navigation.

Вот два моих файла: «IntroPageFive» - это тот, у которого есть кнопка и «реакция-навигация».

Я хочу перейти в «IntroPageOne» при нажатии кнопки.

Код для IntroPageFive:

import React from 'react';
import { Text, View, Image, Linking, Button, TouchableOpacity } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';
import SignInFooter from './signInFooter';
import { createStackNavigator } from 'react-navigation';
import IntroPageOne  from './introPageOne';


const App = createStackNavigator({
  Home: { screen: IntroPageOne },
});

class IntroPageFive extends React.Component {
  render() {
    const { 
      headerTextStyle, 
      thumbnailStyle, 
      viewStyle, 
      subTextStyle, 
      mainTextSection, 
      footerSectionStyle, 
      startButtonStyle, 
      startButtonTextStyle, 
      signInButtonStyle ,
      signInButtonTextStyle
    } = styles;

    const { navigate } = this.props.navigation;

    return (
      <View style = {viewStyle}>
        <Image style = {thumbnailStyle} source = {require('../images/placeholder_thumbnail.png')} />
        <View style = {mainTextSection}>
          <Text style = {headerTextStyle}>Take A Ride For</Text>
          <Text style = {headerTextStyle}>Your Favorite Car!</Text>
        </View>

        <View>
          <TouchableOpacity
             onPress = {() =>
              navigate('Home')
            }

            style = {startButtonStyle}
          >
            <Text style = {startButtonTextStyle}>LET'S GET STARTED</Text>
          </TouchableOpacity>
        </View>

        <View style = {footerSectionStyle}>
          <SignInFooter />
        </View>
      </View>
    );
  }
}

export default IntroPageFive;

Вот код для IntroPageOne:

import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';

import SignInFooter from './signInFooter';


const IntroPageOne = () => {
  const { headerTextStyle, thumbnailStyle, viewStyle, subTextStyle } = styles;

  return (
    
  <View style = {viewStyle} >
    <Image style = {thumbnailStyle} source = {require('../images/placeholder_thumbnail.png')} />
    <Text style = {headerTextStyle}>Forget Everything You</Text>
    <Text style = {headerTextStyle}>Know About Making</Text>
    <Text style = {headerTextStyle}>Deals For Your Car</Text>
    <Text style = {subTextStyle}>Deal negotiation powered by AI</Text>

    <SignInFooter />
  </View>
  );
};
};

export default IntroPageOne;

Может ли кто-нибудь сказать мне, как исправить эту проблему?

Спасибо.

Да, вы должны где-нибудь передать «навигацию» в «IntroPageFive».

ryanwebjackson 28.06.2018 22:36

Кроме того, если вы хотите перейти к «IntroPageOne» при нажатии кнопки, вы должны указать это имя для navigate (), а не «Домой».

ryanwebjackson 28.06.2018 22:37

Кажется, вы не вставляете IntroPageFive в createStackNavigator, поэтому вы не получите опору navigation для своего компонента.

Tholle 28.06.2018 22:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
272
0

Другие вопросы по теме