我如何在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一起使用。

我的选项卡中的

ScreenA，Screen B和Menu屏幕。

我将MenuTabNavigator传递给StackNavigator's Menu组件，如您所见。

问题：

当我使用标签时，标题标题保持为'菜单'。

例如，当我触摸选项卡上的PageB时，我希望标题标题应为'PageB'，但它保持为'Menu'。

使用底部标签时如何更改屏幕标题？

Answer 1

您使用的方法是错误的。如果采用这种方式，则必须创建三个StackNavigator，以便可以获取三个不同的标题。然后将它们包装在标签导航器中。但这是错误的使用方式。

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;