Реагировать на навигацию 5 - заголовок не отображается

Question

Попытка обновить мое приложение для реагирования на навигацию 5 и столкновение с некоторыми проблемами.

Прежде всего, заголовок не отображается. Отрывки из кода:

[из App.js]

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator >
        <Tab.Screen name="Home" component={HomeScreen} options={{ title:'some title' }}/>
        <Tab.Screen name="Upload" component={UploadScreen} />
        <Tab.Screen name="Find" component={FindScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

и стиль текущего экрана:

<View style={{flex:1, flexDirection:'column',justifyContent:'space-between'}}>

Вот скриншот приложения на эмуляторе Android (на моем телефоне он выглядит так же):

Как видно, заголовок не отображается, Вкладка навигации не подходит, как и кнопки (что-то изменилось в их фоне). Я ничего не менял в приложении, кроме обновления до реакции-навигации 5 ..

Спасибо за помощь!

Answer 1

В навигаторах вкладок нет поддержки заголовков. Вы должны обернуть свой навигатор по вкладкам внутри стекового навигатора.

import { createStackNavigator } from "@react-navigation/stack";
// ... other imports

export const App = () => {
    return (
        <NavigationContainer>
            <StackNavigator />
        </NavigationContainer>
    );
}

const Stack = createStackNavigator();
const StackNavigator = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Tabs" component={TabNavigator} />
        </Stack.Navigator>
    );
}

const Tab = createTabNavigator();
const TabNavigator = () => {
    return (
        <Tab.Navigator >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Upload" component={UploadScreen} />
            <Tab.Screen name="Find" component={FindScreen} />
        </Tab.Navigator>
    );
}