Есть ли способ превратить `options` в функцию, аналогичную функции` navigationOptions`? - PullRequest
Новая
       157

Есть ли способ превратить `options` в функцию, аналогичную функции` navigationOptions`?

1 голос
/ 06 мая 2020

В настоящее время я проходил курс: Мультиплатформенная разработка мобильных приложений с React Native на coursera, и я останавливался после каждой лекции, потому что инструктор использовал react-navigation@2.0.1, но я хочу обязательно выучить последняя версия (v5). В этой лекции он создал навигатор стека и вывел на экран значок, например, 

import {createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <Icon
            name="menu"
            size={24}
            color="white"
            onPress={() => navigation.toggleDrawer()}
          />
        ),
      }),
    },
    Dishdetail: { screen: Dishdetail },
  },
  {
    initialRouteName: 'Menu'
  }
);

, где navigationOptions может быть объектом или функцией, которая принимает свойства.

Я конвертирую это как 

import { createStackNavigator } from '@react-navigation/stack';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator();
function MenuNavigatorScreen() {
  return (
    <MenuNavigator.Navigator
      initialRouteName="Menu"
      screenOptions={HeaderOptions}
    >
      <MenuNavigator.Screen
        name="Menu"
        component={Menu}
      />
      <MenuNavigator.Screen
        name="Dishdetail"
        component={Dishdetail}
        options={{ headerTitle: 'Dish Detail' }}
      />
    </MenuNavigator.Navigator>
  );
}

Но я был сбит с толку, как преобразовать функциональность navigationOptions в мой код. Потому что в их документах не сказано, как преобразовать мой options объект в функцию, чтобы использовать navigation prop?

Еще одна вещь - он использовал drawerIcon, 

const MainNavigator = createDrawerNavigator(
  {
      navigationOptions: {
        drawerLabel: 'Login',
        drawerIcon: ({ tintColor }) => (
          <Icon
            name="sign-in"
            type="font-awesome"
            size={24}
            color={tintColor}
          />
        ),
      }
...

Но я не нашел ничего связанного с drawerIcon в навигации по ящику docs
Я сердечно благодарю, если кто-нибудь поможет мне разобраться в этом.

1 Ответ

1 голос
/ 06 мая 2020

Прежде всего, параметр options prop может использоваться для настройки отдельных экранов внутри навигатора. А headerLeft - это функция, которая возвращает элемент React для отображения в левой части заголовка. Когда функция используется, она получает несколько аргументов при отрисовке (onPress, label, labelStyle и т. Д. - проверьте types.tsx для полного списка). 

options = {
    ({
        navigation
    }) => ({
        headerLeft: () => ( <
            Icon name = 'menu'
            size = {
                24
            }
            color = 'white'
            onPress = {
                () =>
                navigation.toggleDrawer()
            }
            />
        )

    })
}

И для drawerIcon используйте: 

options = {
    {
        drawerIcon: ({
            tintColor
        }) => ( <
            Icon name = 'home'
            type = 'font-awesome'
            size = {
                24
            }
            color = {
                tintColor
            }
            />
        )
    }
}
...