React-navigation：使用底部选项卡导航器时不显示标题

Question

我将 react-navigation 与我的 react 本机应用程序一起使用。我创建了一个底部选项卡导航器，并希望在我的屏幕上使用内置标题。但是标题没有出现。没有错误或警告。

app.js：

const TabStack = createBottomTabNavigator({
  Upload: { 
    screen: upload,
    navigationOption: {
      headerTitle: "Upload"
    }
  },
  Profile: { 
    screen: profile,
    navigationOption: {
      headerTitle: "Profile"
    }
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: { screen: TabStack }
  },
  {
    initialRouteName: 'Home'
  }
);

上传.js

class upload extends React.Component {
    static navigationOptions = {
        title: 'Upload'
    };

    constructor(props) {
        super(props);

    ...

我知道可能不需要在组件中声明navigationOptions，因为它已经在 app.js 中声明，但这只是为了表明这两种方法都不起作用。

我该如何解决这个问题？

Answer 1

TabNavigator 未附带Header。最常见的情况是将您的TabNavigator 设为root 导航器，并将每个选项卡设为StackNavigator，然后您将获得标题，因为默认情况下它是StackNavigator 的一部分。

Answer 2

React Navigation 文档还有 suggests adding a stack navigation for each tab.

bottomTabNavigation 屏幕没有有标题，但普通的 StackNavigator 有，因此您可以让底部选项卡打开普通的 StackNavigator。

想想 Instagram：
打开主页标签，然后输入个人资料。当您返回时，您仍然希望位于主页选项卡中。所以它是选项卡导航中的堆栈导航:)

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator initialRouteName="Feed">
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="Profile" component={ProfileScreen} />
    </HomeStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

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

然后 StackNavigator 屏幕将根据屏幕名称添加标题。您还可以定义自定义标题标题：

      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: "Custom title" }}
      />

Answer 3

     MyTabs = tabNavigator
     <Stack.Navigator>
     <Stack.Screen name="MyAccount" component={MyTabs} />
    </Stack.Navigator>

1) 在堆栈导航器中使用 tabNavigator，因为它带有内置标题 功能。 2）堆栈导航器没有内置标题

Answer 4

这对我有用。试试下面的方法

    const TabStack = createBottomTabNavigator({
          Upload: { 
            screen: createStackNavigator({Home: HomeScreen}),,
            navigationOption: {
              headerTitle: "Upload"
            }
          },
          Profile: { 
            screen: profile,
            navigationOption: {`enter code here`
              headerTitle: "Profile"
            }
          }
        });