如何讓 header 出現在反應本機導航的每個屏幕上

Question

看起來 header 默認情況下僅適用於堆棧導航器。 我想知道如何顯示從導航器打開的任何屏幕的標題？

我的主屏幕代碼

const createHomeStack = () =>
<Stack.Navigator>
 <Stack.Screen
  name='Feed'
  component={Feed}
 />
 <Stack.Screen name='Details' component={Details} />
 </Stack.Navigator>

const createBottomTabs = () =>
 <MaterialBottomTabs.Navigator>
  <MaterialBottomTabs.Screen name='Decks' component={Decks} />
  <MaterialBottomTabs.Screen name='Study' component={Study} />
 </MaterialBottomTabs.Navigator >

export default function App() {


 return (
 <Provider store={store}>
  <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name='Home' children={createHomeStack}
          options={{
            title: 'My home',
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
        <Drawer.Screen name='Translate' component={TranslateScreen} />
        <Drawer.Screen name='History' component={History} />
        <Drawer.Screen name='Study' component={createBottomTabs} />
      </Drawer.Navigator>
  </NavigationContainer>
  </Provider>
 );
 }

我想要的東西看起來像 header 的屏幕截圖，每個屏幕上都有打開或關閉的導航器。

Answer 1

你可以看看React-native-elements-header ，

我想這就是你要找的。

Answer 2

我一直在尋找解決方案，但沒有找到使用自定義 header 自動包裝每個組件的好方法。所以我最終創建了 HOC 組件並為每個屏幕包裝了每個組件。

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

然后在你的抽屜里你做：

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>

對於任何嵌套組件，這還應顯示 header。 如果您使用 StackNavigator，您需要將options={{headerShown: false}}傳遞給您的Screen.options