StackNavigation道具无法正常工作

Question

我已尽我所能配置了导航，但是在应用运行时没有错误。按钮会更改阴影以显示它们已被按下，但不幸的是它们无法导航。

我也尝试过不同版本的Expo，React和StackNavigation。

这是MainNavigator的副本：

import ArtGallery from "./ArtGallery";
import HighNet from "./HighNet";
import Economist from "./Economist";
import Main from "./Main";
import { createStackNavigator, createAppContainer } from "react-navigation";

const screens = {
  ArtGallery: {
    screen: ArtGallery
  },
  HighNet: {
    screen: HighNet
  },
  Economist: {
    screen: Economist
  },
  Main: {
    screen: Main
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Economist'
}

const MainNavigator = createStackNavigator(screens, config);
export default createAppContainer(MainNavigator);

这是Main.js的副本：

import React, { Component } from "react";
import { Center } from "@builderx/utils";
import Button2 from "../symbols/button2";
import Button21 from "../symbols/button21";
import Button22 from "../symbols/button22";
import { View, StyleSheet, Text } from "react-native";
import { MainNavigation } from "../screens/MainNavigator";

export default class Main extends Component {
  render() {
    return (
      <View style={styles.root}>
        <Center horizontal>
          <Text style={styles.title}>TV Network</Text>
        </Center>
        <Center horizontal>
          <Button2 
          onPress={() => this.props.navigation.navigate("Winkball")}
          style={styles.winkTv}
          buttonContent="WinkBall TV" />
        </Center>
        <Center horizontal>
          <Button21
            onPress={() => this.props.navigation.navigate("HighNet")}
            style={styles.highNet}
            buttonContent="High Net Worth Channel"
          />
        </Center>
        <Center horizontal>
          <Button22
            onPress={() => this.props.navigation.navigate("Economist")}
            style={styles.artGalleryTv}
            buttonContent="Economist TV"
          />
        </Center>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  root: {
    backgroundColor: "white",
    flex: 1
  },
  title: {
    height: "6.19%",
    width: "64.53%",
    top: 68,
    position: "absolute",
    backgroundColor: "transparent",
    fontSize: 48,
    color: "rgba(109,104,104,1)"
  },
  winkTv: {
    top: 309,
    position: "absolute",
    height: "5.665024630541872%",
    width: "33.06666666666666%"
  },
  highNet: {
    top: 384,
    position: "absolute",
    height: "5.665024630541872%",
    width: "57.333333333333336%"
  },
  artGalleryTv: {
    top: 460,
    position: "absolute",
    width: "42.13%",
    height: "4.06%"
  }
});