如何在 React Native Navigation 中使用 props

Question

I know that my issue can be solved by using props, but I don't know what exactly should I do. I'm making a navigation between screens and my buttons are individual components, I have no problem when I just copying code of the buttons and paste it to the main screen, but I want to have them separetely, however in such a case - navigation isn't working. I want to navigate you to the "About" screen when you click the button.

Home Screen

 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;

About Screen

 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;

About Button

 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

If HomeScreen is a screen defined inside a navigator, then the navigation object will be passed to it as props. You can then pass it down to its children.

const Home = ({navigation}) => {

    ...
    
    <AboutButton navigation={navigation} />
}

It might make sense here to encapsulate the navigation logic inside the button component itself in order to prevent changing it by other components. In this case you could use the useNavigation hook. No props involved here.

function AboutButton() {
    const navigation = useNavigation()

    ...
}