如何在反應原生組件樹中將一個組件導航到另一個組件？

Question

我已經實現了 2 個組件，以下是組件樹。

Mypurchase <--- ProductCard (parent) (child)

我需要從 productCard 組件按鈕導航到另一個名為“complainytSubmission”的屏幕

但它說 navigation.navigate 不是 function 並且 undefined 不是 function 我該如何解決？

“我的購買”組件：

一世

mport * as React from 'react';
import {Dimensions, StyleSheet, View, FlatList, ScrollView, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {Card, Button, Text} from 'react-native-paper';
import {useEffect, useState} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import ProductCard from './ProductCard';
import LinearGradient from "react-native-linear-gradient";
import {hostName} from '../../constants/constants';

const MypurchaseSceen = ({navigation}) => {
  const [productDetails , setproductDetails] = useState([]);
  console.log('productDetails Array',productDetails);

  useEffect(() => {
    getProductDetails();
  }, []);


  const getProductDetails = async () => {
    const token = await AsyncStorage.getItem('userToken');
    console.log('token from storage', token);

    fetch(hostName +"/customer/get-all-products", {

      method: "post",
      headers: {
        'Content-Type': 'application/json',
        'Authentication': `Bearer ${token}`
      },
    })
        .then((response) => response.json())
        .then((json) => setproductDetails(json))
        .catch((error) => console.error(error))

  };


  return (
      <View>
          <FlatList data={productDetails.data}
                    keyExtractor={( item ,index) => 'key' + index}
                    renderItem={({item}) => {
                      return (
                          <ProductCard item = {item}/>
                      
                          )
                    }} />
        
        
      </View>
  );
};
export default MypurchaseSceen;

產品卡片組件：

import * as React from 'react';
import {Dimensions, StyleSheet, TouchableOpacity, View} from 'react-native';
import { Text} from 'react-native-paper';
import LinearGradient from "react-native-linear-gradient";
import ProductButton from './ProductButton';

const ProductCard = ({item} )=> {

    return (
        <View>
            <View style={ styles.cardView}>

                <Text style={styles.productName}> Product Name :{item.productName}</Text>
                <Text style={styles.category}> Category :{item.category} </Text>
                <ProductButton />

            </View>
        </View>
    );
};
export default ProductCard;

Answer 1

在您的 ProductButton 中，嘗試使用導航鈎子

export function ProductButton(){
   const navigation = useNavigation();


  return(
    <Button onClick={() => navigation.navigate('complainytSubmission')}
 )
}