选项卡导航器添加标题

Question

我正在使用 React 导航。我想将标题添加到我的选项卡导航器组件。我该怎么做？

标签导航功能

const TabNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Welcome} />
      <Tab.Screen name="Favorites" component={Favorites} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
};

堆栈导航器功能

<Stack.Navigator
          initialRouteName="SignIn">
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="TabNavigation" component={TabNavigation}/>
 <Stack.Navigator>

Answer 1

您可以在堆栈导航屏幕options 属性中动态自定义标题。例如，您可以创建像 getTitle 这样的自定义函数来根据您的路线动态确定标题。

<Stack.Screen 
    name="TabNavigation"
    component={TabNavigation}
    options={({ route }) => ({ 
        //title: getTitle(route),
        //headerStyle: styles.headerStyle
        //headerTitleStyle: styles.headerTitleStyle
    })}
/>