проблема с предоставлением screenOptions DrawerNavigator - PullRequest
Новая
       17

проблема с предоставлением screenOptions DrawerNavigator

0 голосов
/ 06 мая 2020

Я столкнулся с проблемой при использовании createDrawerNavigator. Я следил за там Документами и пытался реализовать что-то вроде этого: 

import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
const MenuNavigator = createStackNavigator();

const HeaderOptions = {
  headerStyle: {
    backgroundColor: '#512DA8',
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    color: '#fff',
  },
};
function MenuNavigatorScreen() {
  return (
    <MenuNavigator.Navigator
      //initialRouteName
      screenOptions={HeaderOptions}
    >
      //Screens
    </MenuNavigator.Navigator>
  );
}
const HomeNavigator = createStackNavigator();
function HomeNavigatorScreen() {
  return (
    <HomeNavigator.Navigator
      //initialRouteName
      screenOptions={HeaderOptions}
    >
      //Screen
    </HomeNavigator.Navigator>
  );
}
const MainNavigator = createDrawerNavigator();
function MainNavigatorDrawer() {
  return (
    <MainNavigator.Navigator
      initialRouteName="Home"
      drawerStyle={{
        backgroundColor: '#D1C4E9',
      }}
      screenOptions={HeaderOptions} //Isn't it should be applied to all  screen
    >
      <MainNavigator.Screen name="Home" component={HomeNavigatorScreen} />
      <MainNavigator.Screen name="Menu" component={MenuNavigatorScreen} />
      <MainNavigator.Screen name="About" component={component1} />
      <MainNavigator.Screen name="Contact" component={component2} />
    </MainNavigator.Navigator>
  );
}

Я получил заголовок в «Доме» и «Меню», но в «О нас» и «Контакт» На экране нет заголовка. Я думаю, что screenOptions не работает в DrawerNavigator, тогда как дать им эти параметры?

iamge1


image2


И еще одно, я понимаю, что повторяю свой код много раз. Есть ли лучший подход?
Я сердечно благодарю, если кто-нибудь поможет мне разобраться в этом.

Хорошо, я решил проблему с заголовком, превратив свой компонент 1 и компонент 2 в stackNavigator, например: 
const stack = createStackNavigator();
function AboutNavigatorScreen() {
  return (
    <stack.Navigator screenOptions={HeaderOptions}>
      <stack.Screen name="About" component={component1} />
    </stack.Navigator>
  );
}

function ContactNavigatorScreen() {
  return (
    <stack.Navigator screenOptions={HeaderOptions}>
      <stack.Screen name="Contact" component={component2} />
    </stack.Navigator>
  );
}

Что я понимаю: «Если мне нужно добавить какие-либо screenOptions в мой компонент, превратите его в stacknagivator», что кажется странным. Прав ли я, или я переусердствовал со своей проблемой?

...