Javascript 尝试使导航在本机react中的页面之间工作

如何将我的page2.js和page3.js连接到我的CounterApp.js页面，到目前为止，我只使用按钮连接了我的page2和page3，我可以在这两个页面之间来回切换，但我需要一个按钮来连接CounterApp.js页面

CounterApp.js///////////////////////////////////////////////////////////////////////////////////

import {Image} from 'react-native';
import React, { Component } from "react";

import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {


    render() {
        return (
            <View style={styles.container}>
                <View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />

<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter2}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter,
        counter2: state.counter2, 
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
        increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER2' }),
        decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER2' }),

    }
}







export default connect(mapStateToProps, mapDispatchToProps )(CounterApp)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
    static navigationOptions = {
      title: 'Welcome',
    };
    render() {
      const {navigate} = this.props.navigation;
      return (



          <>
        <Button
          title="Go to Jane's profile"
          onPress={() => this.props.navigation.navigate('Profile', {name: 'Jane'})}
        />
        </>
      );
    }
  }
  export default HomeScreen; 

import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
    static navigationOptions = {
      title: 'Welcome',
    };
    render() {
      const {navigate} = this.props.navigation;
      return (
          <>
        <Button
          title="Go to Jane's home"
          onPress={() => this.props.navigation.navigate('Home', {name: 'Jane'})}
        /></>
      );
    }
  }
  export default HomeScreen;

import HomeScreen from './page2'
import ProfileScreen from './page3'
import CounterScreen from './CounterApp'
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
    Home: {screen: HomeScreen},
    Profile: {screen: ProfileScreen},
    counter: {screen: CounterScreen}
  },{initialRouteName:"Home"});
  export default MainNavigator;