javascript - How do I use standalone Header in react-navigation with react-native?

Question

I have a standalone Header that I made:

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;

However, I have been struggling to find a way to connect it to my Stack.Navigator in the main component:

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

Obviously this doesn't work, because the header isn't nested in the Stack.Navigator. You also cannot nest it in the Stack.Navigator, because it only accepts Stack.Screen as children.

I've also tried using RootNavigation as a way to do this, but have failed with that as well. So what exactly am I supposed to be doing to use this Header to navigate my app?

标签： javascriptreactjsreact-nativereact-navigation

Answer 1

因此，您想Stack.Navigator在 ? 中发生某些操作时更改某些内容Header？您最有可能需要的是Header从 向组件传递回调ComponentContainer，Header当用户单击某些内容时将调用该回调。在此回调中，您可以修改您的状态以更改Stack.Navigator或采取其他操作。回调将在内部定义ComponentContainer。

我不确定这一切在 中是如何工作的react-native，但在 React 中可能是这样的：
Header:

// 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;

组件容器：

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

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