<TouchableOpacity onPress={() => navigate('/details')}>

{/* 您的按钮内容 */}

创建自定义组件。因为navigation prop不存在。您只能在NavigationContainer组件下获得navigation。

import React from 'react';
import { TouchableOpacity } from 'react-native';

import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';

export const Button = () => {
  const navigate = useNavigation();

  return (
    <TouchableOpacity
      style={styles.scanButton}
      onPress={() => navigate('ScanScreen')}>
      <MaterialCommunityIcons name="qrcode-scan" color="white" size={30} />
    </TouchableOpacity>
  );
};

navigation prop被传递给screen组件。您可以在导航器中定义屏幕组件。例如，在代码中，这是

<Tab.Screen
        name="main"
        component={MainScreen}
        options={{ headerShown: false }}
      />

一个屏幕组件和MainScreen将接收navigation，您可以导航到另一个屏幕组件。您的应用组件未接收navigation prop

// this is just a custom component, not a screen component
 const App = ({ navigation }) => {}

此外，如果您没有将ScanScreen注册为导航器中的屏幕组件，它将不会收到navigation prop

// you have to register this as a screen component
const ScanScreen = ({ navigation }) => {
  return (
    <View style={styles.screen}>
      <Text>This is the Scan screen</Text>
    </View>
  );
};

检查组件的名称是否拼写正确，即ScanScreen与路由文件中的名称相同。其次检查它们是否在同一堆栈中。

应用程序组件不直接与导航堆栈相关联，它不能直接访问导航属性。要解决这个问题，您可以使用NavigationContainer Package App组件，并将TouchableOpacity移动到MainScreen组件中。

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        style={styles.tabBar}
        screenOptions={screenOptions}
      >
        <Tab.Screen
          name="main"
          component={MainScreen}
          options={{ headerShown: false }}
        />
        <Tab.Screen
          name="scan"
          component={ScanScreen}
          options={{ headerShown: false }}
        />
        <Tab.Screen
          name="profile"
          component={ProfileScreen}
          options={{ headerShown: false }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

MainScreen组件，您可以添加TouchableOpacity进行扫描：

const MainScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Main Screen</Text>
      <TouchableOpacity
        style={styles.scanButton}
        onPress={() => navigation.navigate("scan")}
      >
        <MaterialCommunityIcons name="qrcode-scan" color="white" size={30} />
      </TouchableOpacity>
    </View>
  );
};

你需要传递一个自定义的Button/Icon组件到选项中的tabBarButton属性。我就是这么处理的。

export const CustomTabBarButton = ({
  children,
  onPress,
}: {
  children: React.ReactNode;
  onPress: (e) => void;
}) => (
  <TouchableOpacity
    style={{
      top: -1,
      right: 9,
    }}
    onPress={onPress}
  >
    <View
      style={{
        width: 80,
        height: 80,
        borderRadius: 35,
        justifyContent: "center",
      }}
    >
      {children}
    </View>
  </TouchableOpacity>
);



  <Tab.Screen
    name={SCREEN_CONFIG.SEARCH}
    component={Search}
    options={{
      headerShown: false,
      title: SCREEN_CONFIG.SEARCH,
      tabBarLabelPosition: "below-icon",
      tabBarButton: props => (
        <CustomTabBarButton
          onPress={e => {
            props.onPress?.(e);
          }}
        >
          <View
            style={{
              backgroundColor: COLORS[theme].TAB_BAR_BG,
              borderRadius: 50,
              width: 100,
              height: 100,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <PlusIcon />
          </View>
        </CustomTabBarButton>
      )
    }}
  />