无法从 header React Native Navigation 导航

Question

嗨，我正在尝试从名为商品的产品页面内导航到购物车，但我似乎无法使用 header 进行导航。 我试过使用选项和屏幕选项，但两者都不起作用，我想我把导航放在错误的地方？ 我已将购物车导航加载到商品导航中，但我似乎无法从购物车图标组件导航到此

MerchNav

import React from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
import { useDimensions } from '@react-native-community/hooks';
import { createStackNavigator, HeaderStyleInterpolators } from '@react-navigation/stack';
import ArtistMerch from '../pages/ArtistPages/ArtistMerch';
import ShoppingCartNav from '../navigation/ShoppingCartNav'
import ShoppingCartIcon from '../components/ShoppingCartIcon';


const Stack = createStackNavigator();


export default function MerchNav() {
  console.log(useDimensions());

  return (
 
        <Stack.Navigator>
          <Stack.Screen name = {'ProductsList'} component={ArtistMerch} options={({navigation}) => ({headerStyle: {backgroundColor: 'lightblue'}, 
        headerTitle: (
          <View style={styles.logo}>
              <Text style={styles.logo}> Merchandise </Text>
          </View>),
       headerTitleStyle: { alignSelf: 'center', top: 0},
       
       
       headerRight: () => (
       <ShoppingCartIcon onPress={() => navigation.navigate("ShoppingCart")}/>)})}/>
       

          <Stack.Screen name = {'ShoppingCart'} component={ShoppingCartNav} options={{headerStyle: {backgroundColor: 'lightblue'}, 
        headerTitle: (
          <View style={styles.logo}>
              <Text style={styles.logo}> Shopping Cart </Text>
          </View>)}}/>
        </Stack.Navigator>
    
  );
}

购物车Nav

import React from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
import { useDimensions } from '@react-native-community/hooks';
import { createStackNavigator, HeaderStyleInterpolators } from '@react-navigation/stack';
import ShoppingCart from '../pages/ArtistPages/ShoppingCart';


const Stack = createStackNavigator();


export default function ShoppingCartNav() {
  console.log(useDimensions());

  return (
 
        <Stack.Navigator>
          <Stack.Screen name = {'Cart'} component={ShoppingCart} options={{headerStyle: {backgroundColor: 'lightblue'}, 
        headerTitle: (
          <View style={styles.logo}>
              <Text style={styles.logo}> Shopping Cart </Text>
          </View>)}}/>
        </Stack.Navigator>



    
  );
}

Answer 1

您必须在 MerchNav 组件中接受导航作为道具。 MerchNav({导航})