react-native - 如何更改 TabNavigator 中每个屏幕的标题？ - react 导航

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 的 Menu 组件。

问题:

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

例如，当我触摸标签上的 PageB 时，我希望标题标题应该是“PageB”，但它仍然是“Menu”。

当我使用底部标签时，如何更改屏幕的标题标题？

Answer 1

您使用的方法是错误的。如果你这样做，你必须创建三个 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;