如何在 React Native Navigation 中使用 props

Question

我知道我的问题可以通过使用 props 来解决，但我不知道我到底应该怎么做。 我在屏幕之间进行导航，我的按钮是单独的组件，当我只复制按钮的代码并将其粘贴到主屏幕时我没有问题，但我想单独使用它们，但是在这种情况下 - 导航不工作。 当您单击按钮时，我想将您导航到“关于”屏幕。

主屏幕

 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对象将作为道具传递给它。 然后你可以把它传给它的孩子。

const Home = ({navigation}) => {

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

在这里将导航逻辑封装在按钮组件本身内可能是有意义的，以防止其他组件更改它。 在这种情况下，您可以使用useNavigation挂钩。 这里不涉及道具。

function AboutButton() {
    const navigation = useNavigation()

    ...
}