0

我正在开发一个电子书/有声书应用程序。我目前在 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 />;
};

截屏

我创建了一个自定义标题，但它不会像 go tab-to-tab 那样改变。有没有办法解决这个问题？

4

1 回答 1

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 都有内部堆栈作为组件，它有自己的标题。 带有嵌套导航器的屏幕选项

于 2021-04-26T20:38:07.493 回答