React Native: React-Navigation Не может прочитать свойство 'navigate' из неопределенного - PullRequest
Новая
       12

React Native: React-Navigation Не может прочитать свойство 'navigate' из неопределенного

0 голосов
/ 28 июня 2018

В настоящее время я изучаю 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;

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

Спасибо.

...