我如何在带有React-native的react-navigation中使用独立的Header？

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>
  );
}

这通常是您处理两个同级组件之间的交互的方式，父组件将回调传递给一个，以便第一个孩子可以在事件发生时通知，然后父级通过更改第二个孩子的响应状态来采取行动至。