Как я могу изменить заголовок для каждого экрана внутри TabNavigator? - Реагировать Навигация

Question

Мой стековый навигатор

<NavigationContainer>
    <Stack.Navigator>
       <Stack.Screen name="PageA" component={PageA} options={{title:'Page=A'}} />
       <Stack.Screen name="PageB" component={PageB} options={{title:'Page=B'}} />
       <Stack.Screen name="Menu" component={MenuTabNavigator} options={{title:'Menu'}} />
    </Stack.Navigator>
</NavigationContainer>

и моя вкладка навигатора

const MenuTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="PageA" component={PageA} />
      <Tab.Screen name="PageB" component={PageB} />
      <Tab.Screen name="Menu" component={Menu} />
    </Tab.Navigator>
);};

Я использую Tab Navigator с Stack Navigator .

Экран A , Экран B и Меню Экран в моих вкладках.

Я передаю MenuTabNavigator на StackNavigator's Меню Компонент, как вы можете видеть.

Проблема:

Когда я использую вкладки, заголовок заголовка остается «Меню».

Например, когда я касаюсь PageB на вкладке, я ожидаю, что заголовок заголовка должен быть « PageB », но он остается ' Меню '.

Как изменить заголовок заголовка для экранов при использовании нижних вкладок?

Answer 1

подход, который вы используете, неверен. если вы go таким образом, вам нужно создать три StackNavigators, чтобы вы могли получить три разных заголовка. а затем оберните их во вкладке навигатора. но это неправильный способ его использования.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen({ navigation }) {
    navigation.setOptions({ title: 'Home' })
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
     );
 }

 function SettingsScreen({ navigation }) {
   navigation.setOptions({ title: 'Setting' })

 return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Settings!</Text>
    </View>
  );
}

function Menu({ navigation }) {
  navigation.setOptions({ title: 'Menu' })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Menu</Text>
    </View>
  );
}


const StackHome = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
};
const StackSetting = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Setting" component={SettingsScreen} />
    </Stack.Navigator>
  );
};
const StackMenu = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Menu" component={Menu} />
    </Stack.Navigator>
 );
};
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function App() {

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="PageA" component={StackHome} options={{ title: "Home" }} />
        <Tab.Screen name="PageB" component={StackSetting} options={{ title: "Settings" 
        }} 
   />
        <Tab.Screen name="Menu" component={StackMenu} options={{ title: "Menu" }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;