如何更改 TabNavigator 中每个屏幕的标题？ - 反应导航答案

【问题标题】：How can I change the title for each screen inside TabNavigator? - React Navigation如何更改 TabNavigator 中每个屏幕的标题？ - 反应导航
【发布时间】：2020-06-08 10:45:54
【问题描述】：

我的堆栈导航器

<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”。

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

【问题讨论】：

reactnavigation.org/docs/en/…

标签： react-native react-navigation

【解决方案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;

【讨论】：