如何使用副驾驶进行本地导航？

Question

我正在创建一个反应原生的应用程序，我希望在我的启动页面之后有一个具有副驾驶活动的页面，在此页面中，副驾驶活动默认启动，并在完成此活动后点击名为“转到”的按钮主页！“ ，我可以导航到我的应用程序的主页面。但我无法导航到我的主页面。它显示了一些副驾驶错误。请帮忙..

screenshot of the error I got while navigating

这是它的代码 -

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Dimensions, Text, Image, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';

const WalkthroughableText = walkthroughable(Text);
const WalkthroughableImage = walkthroughable(Image);
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const styles = StyleSheet.create({
  middleView: {
    flex: 1,
    marginTop:10,
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#681742',
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginBottom:30,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});
var navigate;
class GuideScreen extends Component {
   constructor(props,context) {
    super(props);  
    navigate= this.props.navigation;
  } 
  static propTypes = {
    start: PropTypes.func.isRequired,
    copilotEvents: PropTypes.shape({
      on: PropTypes.func.isRequired,
    }).isRequired,
  };

  componentDidMount() {
    this.props.copilotEvents.on('stepChange', this.handleStepChange);
    this.props.start();
  }

  handleStepChange = (step) => {
    console.log(`Current step is: ${step.name}`);
  }



  render() {
    return (
      <View style={{flex:1}}>
        <View style={{backgroundColor:'#681742',padding:5,flexDirection:'row', width:width,height:40}}>
          <View style={{width:width, alignItems:'center', justifyContent:'center'}}>
          <CopilotStep text="Here is an item in the corner of the screen." order={1} name="firstText">
            <WalkthroughableText style={{fontSize:20,color:'#ffffff'}}>
              Feedaro
            </WalkthroughableText>
          </CopilotStep>
          </View>
        </View>
        <View style={styles.middleView}>
          <TouchableOpacity style={styles.button} onPress={() => this.props.start()}>
            <Text style={styles.buttonText}>START THE TUTORIAL! </Text>
          </TouchableOpacity>
        </View>

        <View styles={{flexDirection:'row',flex:1,justifyContent: 'space-between',}}>
          <View styles={{width:100,marginLeft:10}}>
          <CopilotStep text="Here is an item in the corner of the screen." order={2} name="thirdText">
            <WalkthroughableText >
              <Ionicons name="ios-contact" size={40} color="#888" />
            </WalkthroughableText>
          </CopilotStep>
          </View>

          <CopilotStep text="Here is an item in the corner of the screen." order={3} name="fourthText">
            <WalkthroughableText>
              <Ionicons name="ios-game-controller-b" size={40} color="#888" />
            </WalkthroughableText>
          </CopilotStep>
        </View>


        <View style={styles.middleView}>
          <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Tabs')}>
            <Text style={styles.buttonText}>GO TO THE MAIN PAGE!</Text>
          </TouchableOpacity>
          </View>

      </View>
    );
  }
}

export default copilot({
  animated: true, // Can be true or false
  overlay: 'svg', // Can be either view or svg
})(GuideScreen);