如何在React Native Navigation中使用props

Question

我知道我的问题可以通过使用道具来解决，但我不知道我到底应该怎么做。我正在制作屏幕和我的按钮之间的导航是单独的组件，我没有问题，当我只是复制按钮的代码，并将其粘贴到主屏幕，但我想让他们分开，但在这种情况下-导航不工作。我想引导你到"关于"点击按钮时的画面

主屏幕

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;

Answer 1

如果HomeScreen是在导航器内定义的屏幕，那么navigation对象将作为props传递给它。然后你可以把它传给它的孩子。

const Home = ({navigation}) => {
...

<AboutButton navigation={navigation} />
}

在这里，为了防止被其他组件更改，将导航逻辑封装在按钮组件本身中可能是有意义的。在这种情况下，您可以使用useNavigation钩子。这里没有道具。

function AboutButton() {
const navigation = useNavigation()
...
}