Как создать пользовательские параметры заголовка для каждого экрана, мульти-стека навигации реагировать на родную?

Question

Я ищу способ установки пользовательских параметров заголовка (стили, значки, включение / отключение кнопки «Назад», левый и правый параметры для заголовка) для каждого экрана в стеках, сохраняя при этом архитектуру с несколькими стеками для моего приложение в реакцию с родным? Вот так выглядит мое приложение. js прямо сейчас, и я готов изменить его, если потребуется.

const Stack = createStackNavigator();
const App = () => {
  const ref = React.useRef();
  const { getInitialState } = useLinking(ref, {
    prefixes: ['FoodApp://'],
  });

  const AuthStack = createStackNavigator();

  function AuthStackScreen() {
    return (
      <AuthStack.Navigator>
        <AuthStack.Screen name="LogIn" component={LogIn} />
        <AuthStack.Screen name="SignUp" component={SignUp} />
      </AuthStack.Navigator>
    );
  }

  const AppStack = createStackNavigator();

  //I'd like to set different header options for each of the screen here
  function AppStackScreen() {
    return (
      <AppStack.Navigator>
        <AppStack.Screen name="MenuCategoryItems" component={MenuCategoryItems} />
        <AppStack.Screen name="Delivery" component={Delivery} />
        <AppStack.Screen name="Account" component={Account} />
        <AppStack.Screen name="Notification" component={Notification} />
        <AppStack.Screen name="Cart" component={Cart} />
      </AppStack.Navigator>
    );
  }

  //TODO: pass customized bar components
  const Tab = createBottomTabNavigator();

  //I'd like to set different header options for each of the screen here
  function Tabs(){
      return (
          <Tab.Navigator tabBar={props => <BottomMenu {...props} />}>
              <Tab.Screen name="Home" component={Home} />
              <Tab.Screen name="Delivery" component={Delivery} />
              <Tab.Screen name="Account" component={Account} />
              <Tab.Screen name="Notification" component={Notification} />
              <Tab.Screen name="Cart" component={Cart} />
          </Tab.Navigator>
      );
  }

  return (
      <NavigationContainer>
          <Stack.Navigator>
              <Stack.Screen name="Home" component={Tabs} />
              <Stack.Screen name="AppStack" component={AppStackScreen} />
              /*Should I place something else here so that I have access to both AppStack and Tabs navigations?*/
          </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;

Answer 1

Хорошо. Вы можете спрятать заголовок по умолчанию для response-navigation в вашем стеке

function AppStackScreen() {
return (
  <AppStack.Navigator headerMode={'none'}>
    <AppStack.Screen name="MenuCategoryItems" component={MenuCategoryItems} />
    <AppStack.Screen name="Delivery" component={Delivery} />
    <AppStack.Screen name="Account" component={Account} />
    <AppStack.Screen name="Notification" component={Notification} />
    <AppStack.Screen name="Cart" component={Cart} />
  </AppStack.Navigator>

Затем вы можете настраивать компонент заголовка и импортировать его в каждый экран. Извините, потому что мой EL. надеюсь помочь U.