Как использовать автономный заголовок в реагирующей навигации с реагирующей нативной?

Question

У меня есть автономный заголовок, который я сделал:

import React, { useContext } from "react";
import { Appbar } from "react-native-paper";
import { UserContext } from "../contexts/UserContext";
import { LanguageContext } from "../contexts/LanguageContext";
import localeSelect from "../services/localeSelect";
import { title } from "../data/locales";

function Header() {
  const { user } = useContext(UserContext);
  const { language } = useContext(LanguageContext);
  return (
    <Appbar.Header>
      <Appbar.Action icon="menu" />
      {!user && (
        <>
          <Appbar.Content
            title={localeSelect(language, title)}
            color="#ffffff"
          />
          <Appbar.Action
            icon="login"
            color="#ffffff"}
          />
          <Appbar.Action icon="account-plus" color="#ffffff" />
        </>
      )}
      {user && (
        <>
          <Appbar.Content
            title={localeSelect(language, title)}
            color="#ffffff"
          />
        </>
      )}
    </Appbar.Header>
  );
}

export default Header;

Однако я изо всех сил пытался найти способ подключить его к моему Stack.Navigator в основном компоненте:

import "react-native-gesture-handler";
import React, { useContext } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View } from "react-native";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
import GameNotes from "./components/GameNotes";
import { UserContext } from "./contexts/UserContext";

const Stack = createStackNavigator();

export default function ComponentContainer() {
  const { user } = useContext(UserContext);
  return (
    <View>
      <NavigationContainer>
        <Header />
        <Stack.Navigator initialRouteName="Home">
          {user ? (
            <Stack.Screen name="Home" component={GameNotes} />
          ) : (
            <Stack.Screen name="Home" component={Home} />
          )}

          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

Очевидно, что это не работает, потому что заголовок не вложен в Stack.Navigator. Вы также не можете вложить его в Stack.Navigator, потому что он принимает Stack.Screen только как дочерние.

Я также пытался использовать RootNavigation в качестве способа сделать это, но также потерпел неудачу с этим. Так что именно я должен делать, чтобы использовать этот заголовок для навигации по моему приложению?

Answer 1

То есть вы хотите что-то изменить в Stack.Navigator, когда в Header происходит какое-то действие? Скорее всего, вам нужно передать обратный вызов компоненту Header из ComponentContainer, который Header будет вызывать, когда пользователь что-то щелкает. Внутри этого обратного вызова вы можете изменить свое состояние, чтобы изменить Stack.Navigator, или выполнить какое-либо другое действие. Обратный вызов будет определен внутри ComponentContainer.

Я не совсем уверен, как все это работает в react-native, но в React это может выглядеть так:
Заголовок:

// Imports

function Header(onPressCallback) {
  const { user } = useContext(UserContext);
  const { language } = useContext(LanguageContext);
  return (
    <Appbar.Header>
      <Appbar.Action icon="menu" onPress={() => onPressCallback('menu')}  />
      // Other Header items
    </Appbar.Header>
  );
}

export default Header;

ComponentContainer:

// Imports

const Stack = createStackNavigator();

const onPressHandler = (headerItemName) => {
    // Do something in response to a user clicking on the "menu" icon for example
    // Maybe something like change the route on the Stack (don't know this API)
}

export default function ComponentContainer() {
  const { user } = useContext(UserContext);
  return (
    <View>
      <NavigationContainer>
        <Header onPressCallback={onPressHandler}  />
        <Stack.Navigator initialRouteName="Home">
          {user ? (
            <Stack.Screen name="Home" component={GameNotes} />
          ) : (
            <Stack.Screen name="Home" component={Home} />
          )}

          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

Это то, как вы обычно обрабатываете взаимодействия между двумя одноуровневыми компонентами, родительский компонент передает обратный вызов одному, так что первый ребенок может уведомить, когда что-то произошло, а затем родитель принимает меры, изменив состояние, на которое второй ребенок должен ответить.