Невозможно интегрировать React Native Web с реагирующей навигацией - PullRequest
Новая
       20

Невозможно интегрировать React Native Web с реагирующей навигацией

0 голосов
/ 08 января 2019

У меня много трудностей при интеграции навигации React в собственный веб-проект React.

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

Пожалуйста, посмотрите, я не использую последнюю версию реагирующей навигации, но я пробовал ранее самую последнюю (обновление кода по мере изменения API), и она отлично работает.

React Native web Запуск в песочнице

Я клонировал этот проект в том виде, в котором он есть, установил все зависимости и попробовал разные версии React Native Web, Webpack (версии 3 и 4), babel (версии 6 и 7) и последнюю версию React Navigation (версия 3+). ). Я не смог заставить его работать на localhost, ошибка: 

Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
| 
| class TabView extends React.PureComponent {
|   static defaultProps = {
|     lazy: true,
|     removedClippedSubviews: true,

в React Navigation версии 1.5.8 и аналогичная ошибка в последней версии. Но он отлично работает в Песочнице.

Кто-нибудь знаком с этим типом установки и почему точно такой же код не работает на localhost?

Я попытался также создать webpack.config.js в корне и изменить конфигурации, как некоторые предлагали, но безуспешно.

Вы можете клонировать этот репо, который является точно такой же песочницей, и убедитесь сами.

Клонировать этот репозиторий Github

Пожалуйста, любая помощь будет принята с благодарностью

1 Ответ

0 голосов
/ 11 апреля 2019

Это случилось и со мной. Причина в том, что некоторые из модулей, предоставляемых React Navigation, не переносятся в соответствующий им эквивалентный собственный веб-эквивалент. Я имею в виду, что вам нужно переносить эти модули индивидуально, используя babel-loader или что вы используете. Что-то вроде ниже в webpack.config or .babelrc должно работать: 

{
  test: /\.(js|jsx)$/,
  include: [
    path.resolve(root, "node_modules/@react-navigation"),
    path.resolve(root, "node_modules/react-navigation"),
    path.resolve(root, 'node_modules/react-native-uncompiled'),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-gesture-handler"),
    path.resolve(root, "node_modules/react-native-vector-icons"),
    path.resolve(root, "node_modules/react-native-web"),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-drawer"),
    ....and whatever module gives problem....
  ] // external non react-native packages to be compiled by Babel
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: ['react-native-web']
        ...
    }
  }
};

Вот статья с четким объяснением на эту тему: https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0

...