我知道我的问题可以通过使用 prop 来解决，但我不知道我到底应该怎么做。我正在做一个屏幕之间的导航，我的按钮是独立的组件，我复制按钮的代码并粘贴到主屏幕上没有问题，但我希望他们分开，然而，在这种情况下，导航不起作用。我想在您单击按钮时导航到“关于”屏幕。

主屏幕

import { View, Text, ImageBackground, StyleSheet } from "react-native";
import React from "react";

const image = { uri: "https://i.ibb.co/JtnTCS1/BG.png" };

// State
import { useState } from "react";

// Fonts
import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";

// Components
import PlayButton from "../components/PlayButton";
import AboutButton from "../components/AboutButton";
import SettingsButton from "../components/SettingsButton";

// Navigation
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// font
import { FONTFAMILY } from "../theme";

// On Press

const Home = () => {
  const [fontsLoaded] = useFonts({
    Musketeer: require("../assets/fonts/Pixel-Musketeer.otf"),
  });

  if (!fontsLoaded) return null;

  return (
    <View className="bg-mainRed flex-1 justify-center items-center flex-col">
      <ImageBackground
        source={image}
        resizeMode="cover"
        className="flex-1 justify-center w-screen"
      >
        <View className="mb-16">
          <Text
            style={FONTFAMILY.musketeer}
            className="text-brightGreen text-notsobig text-center mb-16"
          >
            KING'S DUNGEON
          </Text>
          <View className="flex flex-col">
            <PlayButton></PlayButton>
            <AboutButton></AboutButton>
            <SettingsButton></SettingsButton>
          </View>
          <Text
            style={FONTFAMILY.musketeer}
            className="text-brightGreen text-small mt-10 text-center"
          >
            Made By Ruslan Makhamtov
          </Text>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  ForText: {
    fontSize: "75px",
  },
});

export default Home;

关于屏幕

import { View, Text } from "react-native";
import React from "react";

// font
import { FONTFAMILY } from "../theme";
import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";

const About = () => {
  const [fontsLoaded] = useFonts({
    Musketeer: require("../assets/fonts/Pixel-Musketeer.otf"),
  });

  if (!fontsLoaded) return null;

  return (
    <View className="bg-mainRed flex-1">
      <Text>About</Text>
    </View>
  );
};

export default About;

关于按钮

import { View, Text, TouchableOpacity } from "react-native";
import React from "react";

// font
import { FONTFAMILY } from "../theme";

// OnPress

const PlayButton = ({ navigation }) => {
  const OnPress = () => navigation.navigate("About");
  return (
    <View className="mt-6" onPress={OnPress}>
      <TouchableOpacity className="flex justify-center items-center">
        <View className="bg-darkGreen border-solid border-4 border-darkGreen rounded w-9/12">
          <View className="bg-darkGreen border-solid border-4 border-green rounded justify-center items-center h-16">
            <Text
              style={FONTFAMILY.musketeer}
              className="text-greenText text-middleSize"
            >
              About
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default PlayButton;