Question

我目前正在学习React Native，并且在React导航方面遇到了一些问题。我想做的是在按下“按钮”时切换屏幕。在“按钮”中，我有：

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

在return语句之前我有const { navigate } = this.props.navigation;。

运行它时，出现“无法读取未定义的属性'navigate'。我猜是我必须将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;

有人可以告诉我如何解决此问题吗？

谢谢。

React Native：React-Navigation无法读取未定义的属性“ navigate”

0 个答案: