React Native: undefined не является функцией (оценка ‘(0, _reactNavigation.StackNavigator)’)

React Native: undefined не является функцией (оценка ‘(0, _reactNavigation.StackNavigator)’)

React Native меняется так часто, и некоторые части, которые мы считаем само собой разумеющимися, внезапно меняются. Итак, если у вас есть старая версия react-navigation (пакет React Native для реализации маршрутов в вашем приложении) и вы обновите ее до версии 3, вы увидите, что ваше приложение теперь дает сбой с самого начала.

Но сначала немного предыстории

Я реализовал базовый экран навигации с тремя разными вкладками, расположенными внизу экрана. В более старой версии реакции-навигации класс StackNavigator должен быть расширен некоторыми атрибутами и параметрами, указанными для его запуска, хотя некоторые значения по умолчанию облегчили мне жизнь.

Когда я обновил пакет response-navigation на своем компьютере и попытался запустить его снова, я обнаружил, что установлена ​​новая версия 3, и мое приложение, реализованное в более старой версии 2, начало давать сбой. Это красный экран, который мне действительно показался.

Мне удалось отследить ошибку в моем RootStackNavigator, определенном как

const RootStackNavigator = StackNavigator(
  {
    Main: {
      screen: TabNavigator,
    },
  }
);
export default class RootNavigator extends React.Component {
  render() {
    return <RootStackNavigator/>;
  }
}

Упомянутый там TabNavigator - это не что иное, как простое постоянное значение с такими параметрами, как tabBarPosition: 'bottom' (снизу или сверху, чтобы различать вкладку вверху или внизу экран)

const TabNavigator = StackNavigator(
  {
    ...
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      }
    },
  },
  {
    ...
    tabBarPosition: 'bottom',
    initialRouteName: 'Home',
  }
);

После трассировки в файле package.json я обнаружил, что здесь была настроена response-navigation 3.6.1:

Вот что мне известно

• Класс StackNavigator и метод createTabNavigator устарели, начиная с версии v3.
• Вместо этого следует использовать метод createBottomNavigator с фактическими компонентами в виде меню.
• Эти методы минимизируют код и имеют те же параметры настройки визуального эффекта в атрибуте tabBarOptions.
• После создания навигатор должен быть обернут в appContainer с помощью метода, называемого createAppContainer.
• На самом деле нет способа реализовать верхний навигатор вкладок для iOS, но для Android он есть (createMaterialTopTabNavigator).

Итак, вот мое решение

Я удалил свой TabNavigator.js. В моем RootNavigation.js изменилось на

import React from 'react';
import Home from '../screens/Home.js';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
const RootNavigator = createMaterialTopTabNavigator({
  ...
  Home: Home
  });
export default createAppContainer(RootNavigator);

В моем App.js я только что вызвал этот недавно созданный контейнер навигатора.

import React from 'react';
import RootNavigator from './navigation/RootNavigator.js'
export default class App extends React.Component {
  render() {
    return (
      <RootNavigator/>
    );
  }
}

Итак, сегодня я узнал…

• … Что React Native немного изменился, добавив новый способ создания верхней и нижней вкладок. Класс StackNavigator устарел, и есть новые способы создания верхней и нижней навигаторов вкладок с помощью методов createTopTabNavigator и createBottomNavigator.
• Также я научился не прикасаться к клавиатуре при обновлении пакетов реагирования, иначе я обнаружу, что просматриваю обновленную документацию, которую считал само собой разумеющейся, она никогда не изменится (~ _ ~ メ)

Чтобы узнать больше

Пожалуйста, прочтите документацию для react-navigator, она очень часто меняется с небольшими обновлениями и новыми приемами, которые могут помочь вам улучшить / поддерживать ваши приложения.

Мне показалось очень интересным, что существует метод создания вкладок навигации с таким же внешним видом, что и в Material Design. Вот ссылка.