Question

我在主屏幕上的标题按钮中使用导航道具时遇到问题。问题似乎是无法呈现导航道具。有人可以帮我解决这个问题吗？我花了一些时间阅读文档，但不能更进一步。谢谢！

import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Home from '../screens/Shop/Home';
import ProductDetails from '../screens/Shop/ProductDetails';
import Colors from '../constants/Colors';
import {Ionicons} from '@expo/vector-icons';
import {
  HeaderButtons,
  HeaderButton,
  Item,
} from 'react-navigation-header-buttons';
import Cart from '../screens/Shop/Cart';
import {NavigationContainer, useNavigation} from '@react-navigation/native';

const IoniconsHeaderButton = (props) => (
  <HeaderButton
    IconComponent={Ionicons}
    iconSize={23}
    color="white"
    {...props}
  />
);

const Stack = createStackNavigator();

export default ShopNavigator = ({navigation}) => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors.accent,
        },
        headerTintColor: 'white',
        headerTitleStyle: {
          fontFamily: 'balsamiq-regular',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerRight: () => (
            <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
              <Item
                title="search"
                iconName="cart-outline"
                onPress={() => navigation.navigate('Cart')}
              />
            </HeaderButtons>
          ),
        }}
      />
      <Stack.Screen
        name="ProductDetails"
        component={ProductDetails}
        options={({route}) => ({title: route.params.itemTitle})}
      />
      <Stack.Screen name="Cart" component={Cart} />
    </Stack.Navigator>
  );
};

Answer 1

基本上，您只是没有传递选项返回的导航参数。这就是未定义错误即将到来的原因

改变这个

  options={{
          headerRight: () => (
            <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
              <Item
                title="search"
                iconName="cart-outline"
                onPress={() => navigation.navigate('Cart')}
              />
            </HeaderButtons>
          ),
        }}

到这里

   options={({ navigation }) => ({
        headerRight: () => (
          <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
            <Item
              title="search"
              iconName="cart-outline"
              onPress={() => navigation.navigate('Cart')}
            />
          </HeaderButtons>
        ),
      })}

导航未定义 - TypeError：未定义不是对象（评估“navigation.navigate”）

1 个答案: