React-navigation：header 在使用底部标签导航器时不显示

Question

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

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'
  }
);

upload.js

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

    constructor(props) {
        super(props);

    ...

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

我该如何解决这个问题？

Answer 1

TabNavigator 未附带 Header。最常见的情况是让你的 TabNavigator 成为 root 导航器，并让每个选项卡成为 StackNavigator 然后你会得到 header 因为它是一部分默认为 StackNavigator。

Answer 2

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

1) 在内置的堆栈导航器中使用 tabNavigator header 功能。 2) 堆栈导航器没有内置 header

Answer 3

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

bottomTabNavigation 屏幕没有header，但普通的 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 屏幕将根据屏幕名称添加一个 header。您还可以定义自定义 header 标题：

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

Answer 4

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

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

React-navigation：header 在使用底部标签导航器时不显示

React-navigation: header does not show up when using bottom tab navigator

reactjs

react-native

react-navigation

stack-navigator