如何为 React Native 中的每个选项卡获取不同的标题？答案

【问题标题】：How do I get a different header for each tab in React Native?如何为 React Native 中的每个选项卡获取不同的标题？
【发布时间】：2020-04-30 03:37:38
【问题描述】：

我正在开发一个电子书/有声书应用程序。我目前在 BottomTabNavigator 中有三个屏幕，该导航器嵌套在堆栈导航器中，因此我可以显示标题：

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { Entypo, MaterialIcons } from "@expo/vector-icons";
import Header from "./src/components/Header";

import HomeScreen from "./src/screens/HomeScreen";
import ListenScreen from "./src/screens/ListenScreen";
import AccountScreen from "./src/screens/AccountScreen";

export const navigator = createStackNavigator(
  {
    mainFlow: createBottomTabNavigator(
      {
        Home: HomeScreen,
        Listen: ListenScreen,
        Account: AccountScreen,
      },
    ),
  },
  {
    defaultNavigationOptions: {
      headerTitle: () => <Header />,
      headerTitleAlign: "center",
    },
  }
);


HomeScreen.navigationOptions = {
  tabBarIcon: <Entypo name="home" size={30} />,
};

ListenScreen.navigationOptions = {
  tabBarIcon: <Entypo name="music" size={30} />,
};

AccountScreen.navigationOptions = {
  tabBarIcon: <MaterialIcons name="account-circle" size={30} />,
};

const App = createAppContainer(navigator);

export default () => {
  return <App />;
};

我创建了一个自定义标题，但它不会随着标签到标签的变化而改变。有办法解决吗？

【问题讨论】：

我在我的一个应用程序中遇到了同样的问题，获取一个状态变量，并在您的屏幕从 HOME 导航到 Listen 时传递它。在收听屏幕中，您必须像活动电子书一样相应地设置您的变量，当您再次返回时，将此参数传递到主屏幕并设置您的活动电子书变量。如果您不明白，请分享您的主页和收听屏幕代码，我会尝试修复它。谢谢

标签： react-native mobile expo stack-navigator react-navigation-bottom-tab

【解决方案1】：

在 react-navigation v5 中，我有同样的问题，我想为每个选项卡屏幕设置不同的标题，所以我解决了我的问题，将每个选项卡定义为一个堆栈，然后这个内部堆栈可以有自己的标题。

const Tab = createBottomTabNavigator();

const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="A"
        component={A}
        options={{ tabBarLabel: 'Home!' }}
      />
    </HomeStack.Navigator>
  );
}

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen
        name="B"
        component={B}
        options={{ tabBarLabel: 'Settings!' }}
      />
    </SettingsStack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

和上面的代码一样，每个 tab.screen 都有内部堆栈作为组件，它有自己的标题。 Screen options with nested navigators

【讨论】：