如何在React Native Navigation中通过Props实现组件导航

问题根源 #

抽离后的按钮组件不属于导航栈直接管理的屏幕组件，无法自动获取navigation对象，导致点击时无法触发导航跳转。以下是两种可行的解决方法：

方法一：通过Props传递navigation对象 #

1. 修正AboutButton组件的命名与点击事件绑定
   你的AboutButton代码里组件名错误写成了PlayButton，且onPress绑定在了不支持点击事件的外层View上，需要修正：

   import { View, Text, TouchableOpacity } from "react-native";
   import React from "react";
   import { FONTFAMILY } from "../theme";
   
   // 修正组件名为AboutButton
   const AboutButton = ({ navigation }) => {
     const handlePress = () => navigation.navigate("About");
     return (
       <View className="mt-6">
         {/* 将onPress绑定到TouchableOpacity上 */}
         <TouchableOpacity 
           className="flex justify-center items-center"
           onPress={handlePress}
         >
           <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 AboutButton;
   

2. 在Home组件中传递navigation props
   Home作为导航栈的屏幕组件，可直接获取navigation对象，将其传递给子按钮组件：

   // 给Home组件添加navigation参数
   const Home = ({ navigation }) => {
     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 navigation={navigation}></PlayButton>
               {/* 传递navigation给AboutButton */}
               <AboutButton navigation={navigation}></AboutButton>
               <SettingsButton navigation={navigation}></SettingsButton>
             </View>
             <Text
               style={FONTFAMILY.musketeer}
               className="text-brightGreen text-small mt-10 text-center"
             >
               Made By Ruslan Makhamtov
             </Text>
           </View>
         </ImageBackground>
       </View>
     );
   };
   

方法二：使用useNavigation钩子（更简洁） #

无需手动传递props，直接用React Navigation提供的useNavigation钩子在按钮组件中获取导航对象：

1. 修改AboutButton组件

   import { View, Text, TouchableOpacity } from "react-native";
   import React from "react";
   import { FONTFAMILY } from "../theme";
   // 导入useNavigation钩子
   import { useNavigation } from "@react-navigation/native";
   
   const AboutButton = () => {
     // 获取navigation对象
     const navigation = useNavigation();
     const handlePress = () => navigation.navigate("About");
     return (
       <View className="mt-6">
         <TouchableOpacity 
           className="flex justify-center items-center"
           onPress={handlePress}
         >
           <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 AboutButton;
   

2. Home组件无需修改
   按钮组件可直接使用，不需要传递任何导航相关props：

   <View className="flex flex-col">
     <PlayButton></PlayButton>
     <AboutButton></AboutButton>
     <SettingsButton></SettingsButton>
   </View>
   

额外验证项 #

确保你的根导航栈已正确配置About页面，示例配置如下：

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者Ruslan Makhmatov